0.属性选择器
属性选择器可以根据元素的属性及属性值来选择元素
示例:
// 包含属性title所有标签
[title] {color:red;}
// 包含属性title的 a标签
a[href] {color:red;}
// 同时包含属性href和title的 a标签
a[href][title] {color:red;}
// href属性值为http://www.w3school.com.cn/且title为W3School的 a标签
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
// class属性为important的 p标签 .
// 严格匹配,class="important warning"时,不能匹配到.
p[class="important"] {color: red;}
1.总结
CSS 选择器参考手册
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute**=value*] | 匹配属性值中包含指定值的每个元素。 |
2.|=和^=的区别
|=就是以xx单词开头.
单词以中杠-为分隔
en-us: 分为en和us两个单词.
en_us: 是一个单词(用的是下划线).
示例:
<p lang="en">1</p>
<p lang="en-us">2</p>
<p lang="en-gb">3</p>
<p lang="en_a">4</p>
<p lang="zh">5</p>
用[lang|=en]匹配
1、2、3可以匹配到,4不可以.
将4中的_改为-时,则4也可以匹配到.