CSS 属性选择器的简单应用以及属性选择器 ~=, |=, ^=, $=, *= 的区别

简单属性选择
如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。
例子 1
如果您希望把包含标题(title)的所有元素变为红色,可以写作:

*[title] {color:red;}

例子 2
与上面类似,可以只对有 href 属性的锚(a 元素)应用样式:

a[href] {color:red;}

例子 3
还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。

例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:

a[href][title] {color:red;}

例子 4
可以采用一些创造性的方法使用这个特性。

例如,可以对所有带有 alt 属性的图像应用样式,从而突出显示这些有效的图像:

img[alt] {border: 5px solid red;}

例子 5
根据具体属性值选择
除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。

例如,假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写:

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

先上总结:

“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"]

CSS 属性选择器的简单应用以及属性选择器 ~=, |=, ^=, $=, *= 的区别

上一篇:vue htmlWebpackPlugin.options.title 标题设置


下一篇:vue组件传值