1、结构性伪类选择器 :
通过第几个进行查找
h2:first-child { } 选中 h2所在 整个 集合里面 第一个h2
h2:last-child { } 选中 h2所在 整个 集合里面 最后一个h2
h2:nth-child(第几个){} 通过第几个进行查找 (第几个) even odd 2n 2n + 1
h2:nth-last-child(倒数第几个){ }
h2:only-child { } 当前集合里面只有一个h2才会被选中
h2:first-of-type { } 选中 h2所在 整个 集合里面 第一个h2
h2:last-of-type { } 选中 h2所在 整个 集合里面 最后一个h2
h2:nth-of-type(第几个){} 通过第几个进行查找 (第几个) even odd 2n 2n + 1
h2:nth-last-of-type(倒数第几个){ }
h2:only-of-type { } 当前集合里面只有一个h2才会被选中
总结: 分析:当前同级元素是否为一类,如果非一类的情况下 选用of-type
补充:
:root{} 选中的是根元素
选择符:empty{} 当一个元素没有任何内容或者任何子元素的时候被选中
2:目标伪类:
:target
3、UI元素状态伪类:
:enabled 表单元素可用的时候执行的样式
:disabled 表单元素禁用的时候执行的样式
:checked 表单选中(单选 多选按钮选中的时候)
::selection 文本选中的时候的样式.
4、动态伪类:
E**:link**
链接伪类选择器
选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E**:visited**
链接伪类选择器
选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E**:active**
用户行为选择器
选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上
E:**hover**
用户行为选择器
选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:**focus**
用户行为选择器
选择匹配的E元素,而且匹配元素获取焦点