1. 元素选择符
元素选择符包括:通配符选择器(*)、标签选择器(element)、id 选择器(#)、 class 选择器(.)
2.关系选择符
1. 后代选择器(E F)
li a {
text-decoration: none;
}
li 下所有a元素,无视层级,子子孙孙都能选中
2. 直接子元素选择器(E>F)
li a {
text-decoration: none;
}
3. 相邻选择器(E+F)相邻元素, 紧跟着的
4. 兄弟选择器(E~F)兄弟元素,同一个父亲,所有兄弟
5. 并列选择器(E, F)并列选择, 既选中E 又选中F
6.
3.属性选择器
<div class="first_circle" title="name"></div>
div[title^="name"] {} // 有title属性,且属性值以name开头
div[title$="name"] {} // 有title属性,且属性值以name结尾
div[title*="name"] {} // 有title属性,且属性值包含name
[]
4.伪类选择器
1. :root 跟标签选择器 相当于<html>
2. :not 否定选择器 排除某些
div:not([class=“demo”]) {} 选中除了class = demo 外的所有div
3. :empty 空标签选择器
用来选择没有内容的元素、不在文档树中的元素,这里的没有内容指的是一点内容都没有,哪怕是一个空格。
4. :first-child
:last-child
:nth-child(n){} 第n个子元素,n代表变量自然数
:nth-last-child(){} 从后往前数
以上四个选择器均有弊端,即如果当前位置元素不是前面所修饰的元素,那么无效.
注:其父元素的第 N 个子元素,不论元素的类型。
比如:ul li:nth-child(2){color: red;} 找ul下的第二个子元素,如果这个子元素不是li,那就选不中
5. :first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type(){} 第xxx个子元素,n代表变量自然数
:nth-last-of-type(){} 从后往前数
此种选择器,限制了类型,即在所修饰元素的类型下选择特定位置的元素。
ul li:nth-of-type(2){} 找ul 下的第二个li子元素
6.:only-child 唯一子元素选择器
选择是独生子的子元素,即该子元素不能有兄弟元素,它的父元素只有他一个直接子元素。
注意:选择的元素是独生子子元素,而非有唯一子元素的父元素。
:only-of-type
如果要选择第某类特定的子元素(p) 在兄弟节点中是此类元素唯一个的话 就需要用到这个属性了
7. :enabled 可用的元素
:disabled 不可用的元素
在web的表单中,有些表单元素有可用(“enabled”)和不可用(“disabled”)状态,比如输入框,密码框,复选框等。在默认情况下,这些表单元素都处在可用状态。那么我们可以通过伪类选择器 enabled 进行选择,disabled则相反。
:checked
选择框的被选中状态
注:checkbox, radio 的一些默认状态不可用属性进行改变,如边框颜色。
8.:read-only 选中只读的元素
eg:<input type=“text” readonly=“readonly”/>
:read-write 选中非只读的元素
eg:<input type=“text”/>
9.
5.伪元素选择器:
伪元素的效果是需要通过添加一个实际的元素才能达到的
CSS3对伪元素进行了一定的调整,在以前的基础上增加了一个:也就是现在变成了::first-letter,::first-line,::before,::after
另外还增加了一个::selection
1.::selection
“::selection” 选择器是用来匹配突出显示的文本(用鼠标选择文本的时候)。浏览器默认情况下,用鼠标选择网页文本是以“蓝色的背景,白色的字体”显示的。
属性:user-select: none;
注:火狐下必须加-moz-
-moz-::selection