最新CSS3伪类和伪元素详解

最新推荐文章于 2024-09-11 09:32:29 发布

阿立聊代码

最新推荐文章于 2024-09-11 09:32:29 发布

阅读量534

点赞数 16

分类专栏：网页设计文章标签： css3 前端 javascript CSS伪类 CSS伪元素

本文链接：https://blog.csdn.net/qq_36324341/article/details/141004248

版权

网页设计专栏收录该内容

29 篇文章 0 订阅

订阅专栏

第4章伪类和伪元素

4.1结构伪类

E:first-child{},第一个元素

样式：

p:first-child {
    color: red; 
}

<div>
    <p>Lorem ipsum</p>
    <p>Dolor sit amet.</p>
</div>

4.1.1nth-*伪类

以计数为基础的，默认情况下，n代表从0开始的数字，以1递增(1,2,3等等)，但是元素是从1开始的。

这里的*包括child和of-type等等

E:nth-*(n){}，n表示1,2,3...

E:nth-*(2n){}，n表示2,4,6...

E:nth-*(3n){}，n表示3,6,9...

E:nth-*(n+1){}，n表示1,2,3,4...

E:nth-*(2n+1){}，n表示1,3,5...

E:nth-*(3n-1){}，n表示2,5,8...

E:nth-*(even){}，相当于2n，偶数

E:nth-*(odd){}，相当于2n+1，奇数

nth-child与nth-of-type

E:nth-child表示按照当前父元素的所有子元素总数进行选择

E:nth-of-type表示按照特定元素进行选择

案例：

10个段落，CSS如下：

1.所有元素2n+1的底设为grey

2.div中的p中的2n字体设为红色

3.div中的p中的3n字体设为绿色

nth-last-child与nth-last-of-type

与nth-child与nth-of-type类似，不同的是从最后一个元素开始计数。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div :nth-child(2n+1) {
            background-color: grey;
        }

        div p:nth-of-type(2n) {
            color: red;
        }

        div p:nth-of-type(odd) {
            color: green;
        }
    </style>
</head>

<body>
    <div>
        <span>span孙颖莎奥运已打52局</span>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <span>span孙颖莎奥运已打52局</span>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
    </div>

</body>

</html>

4.1.2 first-of-type、last-child、last-of-type

表示单个的选择，分别是某类型元素第一个，父元素中子元素最后一个，某类型元素最后一个。

4.1.1案例中，去掉CSS后，重写CSS:

1.p元素的第一个字体为red。

2.所有元素最后一个字体为green。

3.span类型最后一个元素字体为pink。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div p:first-of-type {
            color: red;
        }

        div :last-child {
            color: green;
        }

        div span:last-of-type {
            color: pink;
        }
    </style>
</head>

<body>
    <div>
        <span>span孙颖莎奥运已打52局</span>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <span>span孙颖莎奥运已打52局</span>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
        <p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
    </div>

</body>

</html>

4.1.3 only-child,only-of-type

only-child表示没有任何兄弟元素

only-of-type表示没有相同类型的兄弟

4.2 其他伪类

4.2.1 target伪类

指向特定元素内部链接，URI指向唯一ID或指定锚点位置。

外部链接：

4.伪类target.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <a href="./4.target.html#my_id">Lorem</a>
</body>

</html>

同级目录下 4.target.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <h4>Lorem ipsum</h4>
    <h4>Lorem ipsum</h4>
    <h4>Lorem ipsum</h4>
    <h4>Lorem ipsum</h4>
    <h4>Lorem ipsum</h4>
    <h4>Lorem ipsum</h4>
    <h4>Lorem ipsum</h4>
    <h4>Lorem ipsum</h4>
    <h4>Lorem ipsum</h4>
    <h4>Lorem ipsum</h4>
    <h4>Lorem ipsum</h4>
    <h4>Lorem ipsum</h4>
    <h4 id="my_id" style="color: orange;">Lorem ipsum</h4>
    <h4>Lorem ipsum</h4>
    <h4>Lorem ipsum</h4>
</body>

</html>

将浏览器上下宽度小一点，必须有滚动条，则会发现页面跳转后，会自动滚动到目标位置。

内部链接：

点击前：

点击后：

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .comment:target {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <p><a href="#comment-03">最后的评论</a></p>
    <div class="comment" style="border: 1px dotted;" id="comment-01">
        <p>Thanks for this scintillating example</p>
        <p>N.E. Boddy, April 13</p>
    </div>
    <div class="comment" style="border: 1px dotted;" id="comment-02">
        <p>Meh.</p>
        <p>Sum1, April 14</p>
    </div>
    <div class="comment" style="border: 1px dotted;" id="comment-03">
        <p>CSS3 is going to be great!</p>
        <p>Joe Blogs, April 14</p>
    </div>
</body>

</html>

4.2.2 empty伪类

选择没有子元素(包括文本节点)的元素

看案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        td:empty {
            background-color: red;
        }
    </style>
</head>
<body>
    <table border="">
        <thead>
            <tr>
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
            </tr>
        </thead>
        <tr>
            <td></td>
            <td>Lorem ipsum</td>
            <td><span></span></td>
        </tr>
    </table>
</body>
</html>

4.2.3 root伪类与not伪类(基本不用，知道就行)

root伪类：给html一个较高的特殊度，设置html元素后不该被修改。

html:root { background-color: black }

not伪类：选择除了给定参数元素之外的所有元素。

E:not(F) {}

例子：div > :not(p) { color: red; }

4.3 伪元素

可以把样式应用到文档树中根本不存在的元素上。

::first-line 文本中的第一行

::first-letter 文本中的第一个字母

::after 元素之后添加

::before 元素之前

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p::first-line {
            background-color: red;
        }

        p::first-letter {
            color: blue;
            font-weight: 600;
        }

        h1::before {
            content: "我是h1前面的添加的内容";
            color: chocolate;
        }

        p::after {
            content: "我是P后面的内容";
            color: brown;
        }
    </style>
</head>
<body>
    <h1>|WWF's Mission Statement</h1>
    <p>To stop the degradation of the
        planet's natural environment
        and to build a future in which
        humans live in harmony with nature,
        by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is
        sustainable, and promoting the reduction of pollution and wasteful consumption.|</p>
</body>
</html>

小结：UI元素状态，:selection冷门生僻，不学习。

阿立聊代码

关注

16
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
最新CSS3伪类和伪元素详解

以计数为基础的，默认情况下，n代表从0开始的数字，以1递增(1,2,3等等)，但是元素是从1开始的。表示单个的选择，分别是某类型元素第一个，父元素中子元素最后一个，某类型元素最后一个。将浏览器上下宽度小一点，必须有滚动条，则会发现页面跳转后，会自动滚动到目标位置。root伪类：给html一个较高的特殊度，设置html元素后不该被修改。nth-last-child与nth-last-of-type。not伪类：选择除了给定参数元素之外的所有元素。类似，不同的是从最后一个元素开始计数。
复制链接

扫一扫