CSS全称: cascading style sheets

谈谈css伪类与伪元素这是我见过最全的伪类和伪元素总结
先来个练习题压压惊！

image.png

链接状态伪类

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>伪类测试</title>
    <style type="text/css">
        code {
            background-color: #f9f2f4;
            color: #c7254e;
            padding-left: 2px;
            padding-right: 2px;
            margin-right: 5px;
        }


        a:link {
            color: #0477C0;
            text-decoration: none;
        }
        a:visited {
            color: gray;
        }
        a:hover {
            color: red;
        }
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li><code>:link</code>设置 a 元素在未被访问前的 CSS 样式</li>
        <li><code>:visited</code>设置 a 元素在其链接地址已被访问过时的 CSS 样式</li>
        <li><code>:hover</code>设置元素在其鼠标悬停时的 CSS 样式</li>
        <li><code>:active</code>设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的 CSS 样式</li>
    </ul>
    <ul>
        <li><a href="#1">链接1</a></li>
        <li><a href="#2">链接2</a></li>
        <li><a href="#3">链接3</a></li>
        <li><a href="#4">链接4</a></li>
    </ul>
</body>
</html>

结构化伪类


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>结构伪类测试</title>
    <style type="text/css">
        .item:first-child {
            border-top: 1px solid red;
        }
        .item:last-child {
            border-bottom: 2px solid gray;
        }
        .item:nth-child(even) {
            color: red;
        }
        .item:nth-child(2n+1) {
            color: blue;
        }
        .item:nth-child(4) {
            background: #f5f5f5;
        }
        .item:nth-last-child(5) {
            background: #ccc;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li class="item">HTML</li>
        <li class="item">CSS</li>
        <li class="item">Javascript</li>
        <li class="item">Sass</li>
        <li class="item">Less</li>
        <li class="item">Node.js</li>
    </ul>
    <p>“:nth-child(n)”，n可以是数字（4）、关键词（odd,even）或公式（2n+1）</p>
</body>
</html>

上面代码的实际效果如下图：

image.png

再来个练习题醒醒脑！

image.png

文本首行缩进两个字符

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>设置文本样式</title>
    <style>
        p {
            font-size: 18px;
            color: #999;
            line-height: 1.5em;
        }

        .text {
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <!--
    请设置 class 为 text 的 p 的样式，要求如下：
        * 文字大小为“18px”，颜色为“#999”
        * 行高为“1.5倍”
        * 首行缩进两个文字
    -->
    <p class="text">我是带有class为text的段落</p>
    <p>我是没有设置class为text段落</p>
</body>

</html>