- 属性选择器[]
a[href][title=123] {color:red;} //注意[]里面的=后面不用加“ ”或者‘ ’
意思是找到具有href和title=123两个属性的a元素，并且将颜色改为red
.css文件 [title]{
color:red; //带有title属性的都变红
}
- ul li {color:red;} 空格表示子代，就是包含关系，将ul下面的li改成红色的
- # id选择器，. class选择器 例如 span.dijitButtonNode就是选中了有这个类的span ！！！！ # id选择器 区分大小写
实战
span[widgetid=clear-search] span.dijitButtonNode
表示先选中
widgetid
=clear-search的span，(空格)再在他的子代中找具有class=
dijitButtonNode的span
- 选择器分组
/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}
两者等价，具有统一属性的可以放在一起用“，”分开
- 多类选择器
p<class="a b"> //这个p元素有两个类名，a和b
.a.b{color:red;} //同时拥有a和b类的元素变成红色
- 多属性的时候
属性与属性值必须完全匹配
请注意，这种格式要求必须与属性值完全匹配。
如果属性值包含用空格分隔的值列表，匹配就可能出问题。
请考虑一下的标记片段：
<p class="important warning">This paragraph is a very important warning.</p>
如果写成 p[class="important"]，那么这个规则不能匹配示例标记。
要根据具体属性值来选择该元素，必须这样写：（并不是必须）
p[class="important warning"] {color: red;}
还可以~
p[class~="important"] {color: red;}
也是可以的！！！
-
img[title~="Figure"] {border: 1px solid gray;}这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。 - 子串匹配属性选择器（在属性选择的时候加入正则表达式）
|
[abc^="def"]
|
选择 abc 属性值以 "def" 开头的所有元素
|
|
[abc$="def"]
|
选择 abc 属性值以 "def" 结尾的所有元素
|
|
[abc*="def"]
|
选择 abc 属性值中包含子串 "def" 的所有元素
|