除了常用的通用选择器(*),ID选择器,class选择器,标签选择器之外,以下主要总结一下自己不常用但是却很重要的一些选择器:
注意:多类选择器,就是类似于.A.B,.C#D......这样的选择器,选择的是所有既包含类名A又包含类名B的元素,同理其他的就好解释了,
属性选择器中可以可以连着来比如.a[attr][attr1],表示选择所有类名为a而且也包含属性attr又包含属性attr1的元素
伪类选择器:
:visited 当链接被访问过后的时设置的样式(多用于链接);
:hover 当鼠标悬浮在元素上的时候定义的样式(一般任何元素均可);
:link 链接处于平常状态的样式(多用于链接);
:active 当链接访问的那一瞬间定义的样式;
:focus 当鼠标聚焦的时候定义的样式(一般用在 input元素上);
:before 在元素内部最前面插入生成的内容;
:after 在元素内部最后插入生成的内容;
注意:这些伪类可以混合叠加使用哦!
高级的选择器:
D>E(子选择器) | 选择D元素下面所有的直接子元素E |
D+E(紧兄弟选择器) | 选择在D元素之后并且紧挨着D元素的兄弟元素E |
div[attribute](属性) | 选择带有属性attribute的所有的div元素 |
div[attr = val](属性值) | 选择含有属性attr 并且属性值为val的所有的div元素 |
D~E(兄弟选择器) | 选择位于D元素之后所有的E元素(兄弟元素) |
D[attr~=val] | 选择所有attr属性有多个值,其中一个值为val的所有D的元素 |
D[attr|= val] | 选择attr属性值有多个连字符号分割,其中一个以val开头的D元素 |
2.恰当的使用继承可以简化css结构,减少代码的冗余度。
CSS3新增的选择器:
新增属性选择器:
D[attr ^= "val"] 匹配所有含有属性attr,而且属性值以val开头的D元素;
D[attr $= "val"] 匹配所有含有属性attr,而且属性值以val结尾的D元素;
D[attr ^= "val"] 匹配所有含有属性attr,而且属性值包含val字符串的D元素;
表单相关:
D:enabled 匹配表单中激活的元素;
D:disabled 匹配表单中禁用的元素;
D:checked 匹配表单中被选中的单选框或者复选框的元素;
D::selection 匹配表单中被选中的元素;
反选选择器:
D:not(s) 匹配所有不符合当前选择器的元素;
例如:p:not([class]){color:red;} // 没有class属性的p元素都设置为红色;
特殊:
D:target 一般用于锚链接,其效果是这样的:
当浏览器地址里的hash(地址里#号后面的部分)和:target 伪选择器指定的ID匹配上时,它的样式就会在这个ID元素上生效。
例如:
<h2 id="section2">Section 2</h2>
<h2 id="section1">Section 1</h2>
:target {
color: #000;
}
/* applies to H2's */
h2:target {
color: #f00;
}
当hash值为h2元素所对应的id值的时候触发对应的样式;
结构伪类选择器: