CSS伪类选择器介绍和使用

伪类选择器：大的分类可以分为结构伪类选择器、动态伪类选择器和UI元素状态伪类选择器

结构伪类选择器

1、nth系列选择器：nth-child和nth-of-type

:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()倒序选择某个元素的一个或多个特定的子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；

:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:nth-of-type()选择指定的元素；
:nth-last-of-type()倒序选择指定的元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；

child和of-type的区别：child的索引是从第一个子元素开始计算的，不区分类型；of-type的索引是按照类型单独计算索引的

比如下面使用child选择器设置li元素都将无效：

<ul>
    <p>段落1</p>
    <li>列表1</li><!-- 在未非分类的情况下，li子元素索引为2 -->
</ul>

li:first-child{
    background-color:red;
}

li:nth-child(1){
    background-color:blue;
}

li:only-child{
    background-color:yellow;
}

如果换成type，都会起作用的：

li:first-of-type{
    background-color:red;
}

li:nth-of-type(1){
    background-color:blue;
}

li:only-of-type{
    background-color:yellow;
}

2、:empty选择器

:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格，比如说，你有三个段落，其中一个段落什么都没有，完全是空的，你想这个p不显示

p:empty {display: none;}

3、否定选择器（:not）

定位不匹配该选择器的元素，比如对form中所有input加边框，但又不想submit也起变化

input:not([type="submit"]) {border: 1px solid red;}

4、动态伪类选择器

因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如”:link”,”:visited”;另外一种被称作用户行为伪类，如“:hover”,”:active”，”:focus”和“:target”。

.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
input[type="text"]:focus{color:red}/*文本框获取焦点是景色为红色*/
#tab1:target{z-index: 1;}/*点击页面的超链接并跳转至#tab1元素，在#tab1(target)元素上显示效果*/

5、UI元素状态伪类选择器

:enabled选择器用来指定当前元素处于可用状态时的样式
:disabled选择器用来指定当前元素处于不可用状态时的样式
:checked选择器用来指定当表单中的radio单选按钮或checkbox复选框处于选取状态的时的样式。在ff下需要写成-moz-checked的形式
:read-only选择器用来指定当元素处于只读状态时的样式，在ff下需要写成-moz-read-only的形式
:read-write选择器用来指定当元素处于非只读状态时的样式。在ff下需要写成-moz-read-write的形式
:default 指定当页面打开时默认处于选区状态的radio或checkbox控件的样式
:indeterminate 指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了一个单选框，则该样式被取消
:required input为空的时候触发。
:valid 当填写的内容符合要求的时候触发。
:invalid 当填写的内容不符合要求的时候触发。
比如说你想将”disabled”的文本框与别的文本框区别出来：

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

更详细的使用案例和解说可以看W3CPLUS的CSS3–伪类选择器

6、伪元素选择器

CSS中的伪元素:first-line,:first-letter,:before,:after;那么在CSS3中，对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,ff下格式为”::-moz-selection“，只对background-color和color有效

关于伪类和伪元素的区别可以看我之前的一篇整理：css伪类和伪元素的区别
所有伪类以列表的形式展示点这里