从前慢现在也慢

这个屌丝很懒，什么也没留下！

热门标签

CSS 选择器分栏——伪元素与伪类选择器_伪元素选择器

作者：从前慢现在也慢 | 2024-08-22 02:43:43

踩

伪元素选择器

文章目录

伪类选择器

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。

结构伪类选择器

nthchild选择器

nthchild选择器	描述
E:nth-child(n)	同级中第n个元素,并且这个元素是E
E:nth-last-child(n)	同级中倒数第n个元素,并且元素是E
E:first-child	同级中第1个元素,并且这个元素是E
E:last-child	同级中最后1个元素,并且这个元素是E

    <style>
        li:nth-child(3){
            background-color: red;
        }
        li:nth-last-child(2){
            background-color: blue;
        }
        li:first-child{
            background-color: yellow;
        }
        li:last-child{
            background-color: green;
        }
    </style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果图:

请添加图片描述

nthtype选择器

nthtype选择器	描述
E: nth-of-type(n)	同级中同类型的第n个元素，并且这个元素是E
E: nth-last-of-type(n)	同级中同类型的倒数第n个元素，并且这个元素是E
E: frist-of-type	同级中同类型的第1个元素，并且这个元素是E
E:last-of-type	同级中同类型的最后个元素，并且这个元素是E
E:only-of-type	同级中同类型的唯一一个元素，并且这个元素是E

<style>
    p:nth-of-type(3) {
        background-color: red;
    }
    p:nth-last-of-type(1) {
        background-color: pink;
    }
    a:first-of-type {
        background-color: green;
    }
    a:last-of-type {
        background-color: yellow;
    }
    b:only-of-type {
        background-color: cyan;
    }
</style>
<body>
    <div>
        <p>p1</p>
        <p>p2</p>
        <a href="">去百度1</a>
        <a href="">去百度2</a>
        <span>span1</span>
        <span>span2</span>
        <p>p3</p>
        <p>p4</p>
        <a href="">去百度3</a>
        <a href="">去百度4</a>
        <span>span3</span>
        <span>span4</span>
        <b>b</b>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

效果图：

请添加图片描述

其他结构伪类选择器

结构伪类选择器	描述
:root	选择根元素 html
:empty	选择空元素
E:only-child	同级中唯一一个元素，并且这个元素是E

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    div:empty {
        border: 5px solid #000;
    }
    div:only-child {
        border: 5px solid red;
    }
</style>
<body>
    <div></div><br>
    <div>
        <div>div1</div>
    </div><br>
    <div>
        <div>div2</div>
        <div>div3</div>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果图：

请添加图片描述

带参数的结构伪类选择器

E:nth-child(n)

n可以为数字、表达式 (2n 2n+1 3n 3n+1…)、关键词：odd 奇数、even 偶数

<style>
    .box {
        width: 500px;
    }
    .box div {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        background-color: green;
        float: left;
        text-align: center;
        line-height: 80px;
        color: #fff;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    /* 核心代码 */
    .box div:nth-child(2n) {
        background-color: #000;
    }
</style>
<body>
    <!-- div.box>div*10{$} -->
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

效果图：

请添加图片描述

目标伪类选择器

E:target 选择锚点元素，锚点必须处于激活状态，元素是E

<style>
    div {
        width: 200px;
        height: 200px;
        border: 3px solid #000;
        float: left;
        font-size: 28px;
        text-align: center;
        line-height: 200px;
    }
    /* div这个锚点处于激活状态的时候 */
    div:target {
        background-color: pink;
    }
</style>
<body>
    <a href="#box1">box1</a>
    <a href="#box2">box2</a>
    <a href="#box3">box3</a>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果图：

请添加图片描述

UI状态伪类选择器

E:enabled 元素处于可用状态 — 表单控件可以用
E:disabled 元素处于禁用状态 — 表单控件可以用，元素要设置disabled属性
E:checked 元素处于选中状态 — 单选框、多选框

<style>
    input[type="text"]:enabled {
        background-color: pink;
    }
    input[type="password"]:disabled {
        background-color: yellow;
    }
    input[type="checkbox"]:checked {
        width: 20px;
        height: 20px;
    }
</style>
<body>
    <p>
        <input type="text">
        <input type="password" disabled>
    </p>
    <p>
        <input type="checkbox">足球
        <input type="checkbox">篮球
        <input type="checkbox">羽毛球
    </p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果图：

请添加图片描述

否定伪类选择器

E:not(val) 选中不是val选择器的元素E

<style>
    li {
        width: 400px;
        height: 40px;
        line-height: 40px;
    }
    li:not(:last-of-type) {
        border-bottom: 1px solid #000;
    }
</style>
<!-- 分隔符 -->
<body>
  <ul>
    <li>文本文本文本</li>
    <li>文本文本文本</li>
    <li>文本文本文本</li>
    <li>文本文本文本</li>
    <li>文本文本文本</li>
  </ul>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果图：

请添加图片描述

动态伪类选择器

E:link

链接伪类选择器

选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

E:visited

链接伪类选择器

选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

E:active

用户行为选择器

选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

E:hover

用户行为选择器

选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

快记顺序：LVHA :link :visited :hover :active（love-hate 爱恨原则）

以上四种都需要使用时一定要按顺序（LVHA）书写，否则没有效果。

E:focus 用户行为选择器选择匹配的E元素，而且匹配元素获取焦点

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: green;
    }
    div:hover{
        background-color: blue;
    }
    div:active{
        background-color: pink;
    }
</style>
<body>
    <div>div</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

CSS 伪元素

伪元素是一个附加在选择器末的关键词，允许你对被选择元素的特定部分修改样式。

常见的伪元素

伪元素	描述
::before	在元素的最前面添加内容
::after	在元素的最后面添加内容
::first-letter	第一个字符的样式
::first-line	第一行的样式
::selection	用户选中的内容的样式（css3）

注：伪元素的css属性中content属性必须写

content属性作用：伪元素要添加的内容（添加了内容之后默认为行内元素）

注意：::before、::after、::first-letter、::first-line、::selection这四个的双冒号可以改为单冒号（例：:before）

::selection只能使用双冒号，并且只能改变文本颜色和背景颜色

实例

::before

<style>
    div {
        width: 600px;
        height: 600px;
        background-color: pink;
    }
    div:before {
        /* 在元素内容的最前面插入内容 */
        /* content必须写 */
        /* 默认插入的内容是行内元素 */
        content: "前面的内容";
        width: 200px;
        height: 300px;
        background-color: blue;
        display: block;
        color: red;
        font-size: 40px;
    }
</style>
<!-- 分割线 -->
<div>爱我中华</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

::after

<style>
    div {
        width: 600px;
        height: 600px;
        background-color: pink;
    }
    div::after {
        content: "后面的内容";
        width: 200px;
        height: 300px;
        background-color: blue;
        display: block;
        color: red;
        font-size: 40px;
    }
</style>
<!-- 分割线 -->
<div>爱我中华</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

::first-letter

<style>
    div {
        width: 400px;
        height: 200px;
        background-color: pink;
    }
    div::first-letter{
        color: red;
        font-size: 30px;
        background-color: blue;
    }
</style>
<!-- 分割线 -->
<div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi totam
    ducimus perspiciatis dolore neque incidunt, eos voluptas, quae, maxime
    blanditiis magni qui iste at consectetur quis doloribus porro cumque sint.
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

::first-line

<style>
    div {
        width: 400px;
        height: 200px;
        background-color: pink;
    }
    div::first-line {
        color: red;
        font-size: 30px;
        background-color: blue;
    }
</style>
<!-- 分割线 -->
<div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi totam
    ducimus perspiciatis dolore neque incidunt, eos voluptas, quae, maxime
    blanditiis magni qui iste at consectetur quis doloribus porro cumque sint.
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

::selection

<style>
    div {
        width: 400px;
        height: 200px;
        background-color: pink;
    }
    div::selection {
        color: red;
        font-size: 30px;
        background-color: blue;
    }
</style>
<!-- 分割线 -->
<div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi totam
    ducimus perspiciatis dolore neque incidunt, eos voluptas, quae, maxime
    blanditiis magni qui iste at consectetur quis doloribus porro cumque sint.
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/1014429