CSS伪类(Pseudo-classes)、伪元素、伪类选择器

CSS伪类(Pseudo-classes)和伪元素(详细)

那什么是伪类？

伪类是添加到选择器上的关键字，指定元素的特殊状态，伪类可以根据内容的状态来应用不同的样式；

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。

由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

那什么是伪元素？

伪元素是通过样式来对指定的元素添加一个用CSS写的子元素；

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。

实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

常见的伪类有哪些？

1、 a标签的伪类：

:link 有链接的

:visited 已访问的

:hover 鼠标移入

:active 点击时的

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：

在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类的名称不区分大小写。

2、表单的伪类：

:checked 选中单选框多选框

:read-only 只读

:disabled 禁用

:focus 焦点

3、元素选中伪类（伪类选择器常用方法）：

:first-child 第一个子元素

:last-child 最后一个子元素

:first-of-type 第一个指定类型的元素

:last-of-type 最后一个指定类型的元素

不管元素位置在哪

:nth-child(an+b) n为整数，取符合对应位置的元素

:nth-child(2n+1) 奇数的子元素

:nth-child(2n) 偶数

:nth-of-type(an+b)

从最后开始数

:nth-last-child(an+b)

:nth-last-of-type(an+b)

常见的伪元素有哪些？

1、:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

注意："first-line" 伪元素只能用于块级元素。

2、:first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式：

p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

注意： "first-letter" 伪元素只能用于块级元素。

CSS - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容，在元素最开始的位置创建伪元素。

下面的例子在每个 <h1>元素前面插入一幅图片：

h1:before 
{
    content:url(img01.jpg);    //引入图片 
}

CSS - :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容，在元素最后的位置创建伪元素。

下面的例子在每个 <h1> 元素后面插入一幅图片：

h1:after 
{
    content:url(img01.jpg);    //引入图片 
}

实例应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .menu>div{
            width: 80px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            float: left;
            position: relative;
        }
        .menu ul{
            position: absolute;
            left: 0;
            top: 40px;
            z-index: 2;
            border: 1px solid #CCC;
            background-color: #FFF;
            border-radius: 5px;
            display: none;
        }
        .menu ul>li{
            width: 80px;
            text-align: center;
            font-size: 16px;
            height: 32px;
            line-height: 32px;
        }
        .menu>div:hover>ul{
            display: block;
        }

        .menu ul>li:hover{
            background-color: #CCC;
            cursor: pointer;
        }

        .menu::after{
            content: "";
            height: 0;
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div>
            <span>设置</span>
            <ul>
                <li>搜索设置</li>
                <li>高级设置</li>
                <li>隐私设置</li>
            </ul>
        </div>
        <div>登录</div>
    </div>
</body>
</html>

赶紧点赞收藏运行起来吧！