CSS伪类与伪元素

CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

状态性伪类

是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

:link 应用于未被访问过的链接。
:hover 应用于鼠标悬停到的元素。
:active 应用于被激活的元素。
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。

结构性伪类

CSS3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

div:first-child 选择属于其父元素的第一个子元素的每个div元素。
div:last-child 选择属于其父元素最后一个子元素的每个div元素。
div:nth-child(n) 选择属于其父元素的第n个子元素的每个div元素。
div:nth-last-child(n) 同上，从这个元素的最后一个子元素开始算。
div:nth-of-type(n) 选择属于其父元素第n个div元素的每个div元素。
div:nth-last-of-type(n) 同上，但是从最后一个子元素开始计数。
div:first-of-type 选择属于其父元素的首个div元素的每个div元素。
div:last-of-type 选择属于其父元素的最后div元素的每个div元素。
div:only-child 选择属于其父元素的唯一子元素的每个div元素。
div:only-of-type 选择属于其父元素唯一的div元素的每个div元素。
:empty 选择的元素里面没有任何内容。
:checked 匹配被选中的input元素，这个input元素包括radio和checkbox。
:default 匹配默认选中的元素，例如提交按钮总是表单的默认按钮。
:disabled 匹配禁用的表单元素。
:enabled 匹配没有设置disabled属性的表单元素。
:valid 匹配条件验证正确的表单元素。

伪元素

用于创建一些不在文档树中的元素，并为其添加样式。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。

CSS3规范中要求使用单冒号:用于CSS3伪类，双冒号::用于 CSS3伪元素，目的是区分伪类和伪元素。

::first-letter 选择元素文本的第一个字。
::first-line 选择元素文本的第一行。
::before 在元素内容的最前面添加新内容。
::after 在元素内容的最后面添加新内容。
::selection 匹配用户被用户选中或者处于高亮状态的部分。
::placeholder 匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。

代码示例

<!DOCTYPE html>
<html lang="zh">

<head>
    <title>CSS选择器</title>
</head>

<body>
    <div id="s1">id选择器</div>

    <div class="s2">类选择器1</div>
    <div class="s2">类选择器2</div>
    <div class="s3">类选择器3</div>

    <p>标签选择器1</p>
    <p>标签选择器2</p>

    <div id="s4">相邻选择器 +</div>
    <div>相邻选择器</div>
    <!-- + 只选择紧邻的兄弟 -->
    <div id="s5">相邻选择器 ~</div>
    <div class="s6">相邻选择器</div>
    <div class="s6">相邻选择器</div>
    <div class="s6">相邻选择器</div>
    <!-- ~ 选择兄弟以及兄弟的兄弟..... -->

    <div class="s7">
        <div>子元素选择器</div>
        <em>
            <div>子元素选择器不被选择</div>
            <div>子元素选择器不被选择</div>
        </em>
    </div>

    <div class="s8">
        <div>后代选择器</div>
        <em>
            <div>后代选择器</div>
            <div>后代选择器</div>
        </em>
    </div>


    <div class="s9">
        <div>通配符选择器</div>
        <em>通配符选择器</em>
    </div>

    <div rel="s10" >属性选择器</div>

    <div >
        <div class="s11">伪类选择器例</div>
    </div>


    <style>
    #s1 {
        color: red;
    }

    .s2{
        color: green;
    }

    .s2,.s3,#s1{
        font-style:italic;
    }

    p{
        color: blue;
    }

    #s4 + div{
        color: #0033ff;
    }
    #s5 ~ .s6{
        color: #FFD700;
    }

    /* 子选择器会选择下一级 */
    .s7 > div{
        color: #E066FF;
    }

    /* 后代选择器会选择全部后代 */
    .s8 div{
        color: #7CFC00;
    }

    .s9 * {
        color: #3370CC;
    }

    div[rel="s10"]{
        color: #573CC4;
    }

    .s11:first-child{
        color: #55AA55;
    }
    </style>

</body>

</html>

伪类

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

状态性伪类

:link 应用于未被访问过的链接。
:hover 应用于鼠标悬停到的元素。
:active 应用于被激活的元素。
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。

结构性伪类

CSS3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

div:first-child 选择属于其父元素的第一个子元素的每个div元素。
div:last-child 选择属于其父元素最后一个子元素的每个div元素。
div:nth-child(n) 选择属于其父元素的第n个子元素的每个div元素。
div:nth-last-child(n) 同上，从这个元素的最后一个子元素开始算。
div:nth-of-type(n) 选择属于其父元素第n个div元素的每个div元素。
div:nth-last-of-type(n) 同上，但是从最后一个子元素开始计数。
div:first-of-type 选择属于其父元素的首个div元素的每个div元素。
div:last-of-type 选择属于其父元素的最后div元素的每个div元素。
div:only-child 选择属于其父元素的唯一子元素的每个div元素。
div:only-of-type 选择属于其父元素唯一的div元素的每个div元素。
:empty 选择的元素里面没有任何内容。
:checked 匹配被选中的input元素，这个input元素包括radio和checkbox。
:default 匹配默认选中的元素，例如提交按钮总是表单的默认按钮。
:disabled 匹配禁用的表单元素。
:enabled 匹配没有设置disabled属性的表单元素。
:valid 匹配条件验证正确的表单元素。

版权所有

许可证：署名 4.0 国际 (CC-BY-4.0)