- 属性选择器[]
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" 的所有元素
|