属性选择器

最新更新: 2019-07-31 17:41:22 阅读: 16次

具有特定属性的HTML元素样式不仅仅是class和id。

[title]
{
    color:blue;
}
[title=runoob]
{
    border:5px solid green;
}

属性和值的选择器 - 多值

下面是包含指定值的title属性的元素样式的例子,使用(~)分隔属性和值:

[title~=hello] { color:blue; }//里面有这个值 并且是完整的值

下面是包含指定值的lang属性的元素样式的例子,使用(|)分隔属性和值:

[lang|=en] { color:blue; } //开头是这个值

CSS 属性选择器 *=, |=, ^=, $=, *= 的区别

先上总结:

"value 是完整单词" 类型的比较符号: ~=, |=

"拼接字符串" 类型的比较符号: *=, ^=, $=

1.attribute 属性中包含 value: 

[attribute~=value] 属性中包含独立的单词为 value,例如:

[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />

[attribute*=value] 属性中做字符串拆分,只要能拆出来 value 这个词就行,例如:

[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

2.attribute 属性以 value 开头:

[attribute|=value] 属性中必须是完整且唯一的单词,或者以 - 分隔开:,例如:

[lang|=en] --> <p lang="en"> <p lang="en-us">
[

attribute^=value] 属性的前几个字母是 value 就可以,例如:

[lang^=en] --> <p lang="ennn">

3.attribute 属性以 value 结尾:

[attribute$=value] 属性的后几个字母是 value 就可以,例如:
a[src$=".pdf"]