在这篇博客中，我会结合具体例子来分析伪类选择器（可能概念性不是很强，但是好用 ~ ）

属性选择器

  • input[value] 意思是选择的input标签，必须具有value属性
  • input[type=text] 意思是选择的input标签，必须是属性type值为text的元素
  • div[class^=box] 意思是选择的div标签，属性class的值是以box开头的
  • div[class$=box] 意思是选择的div标签，属性class的值是以box结尾的
  • div[class*=box] 意思是选择的div标签，属性class的值中含有box （要注意：该权重高于.box…. 但低于div .box…）

结构伪类选择器

  • ul:first-child 选择ul中的第一个孩子
  • ul li:first-child 选择ul中的第一个li
  • ul:last-child 选择ul中的最后一个孩子

  • ul:nth-child(n) 选择ul中的第n个孩子 n可以是数字、关键字、公式

    n的用法：

n=2 选择第二个孩子
n 可以是关键字：even偶数，odd奇数
n 可以是公式，
例如ul li:nth-child(n) 意思是从第0个孩子开始（但是注意 第0个孩子是不存在的），逐次加1，选中所有的
例如ul li:nth-child(2n+1) 意思是n从0开始，选中序号为2*n+1 的孩子

  • ul:first-of-type 选择ul中的第一个孩子
  • ul li:last-of-type 选择ul中的最后一个li
  • ul li:nth-of-type(even) 选择ul偶数项的li

最后根据我的理解写一下nth-of-type 和 nth-child的区别：
见如下ul p div以及style中的内容

结果是背景颜色是根据nth-of-type改变的 不会因为nth-child改变。

因为nth-child在修改样式的时候，会先给ul中的孩子排序，即p为1，div为2，div为3，然后去看nth-child中的数字，发现第一个孩子是p，然后去找前面需要匹配的标签 （此例中为div），然后会发现匹配的是div，不符合

但是nth-of-type是反过来的，它会先看选中的标签是什么（此例中为div），然后为该div中的孩子排序，然后再去匹配nth-of-type中的数字，看看是选中了div中的第几个孩子
找到了之后修改样式

要结合下面这个例子去看哦！

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
   <!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 div:nth-child(1){
            background-color: aquamarine;
        }

        ul div:nth-of-type(1){
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
 <ul>
        <p>第一</p>
        <div>第二</div>
        <div>第三</div>
    </ul>

</body>
</html>

伪元素选择器

  • element::before 在element元素内部的前面插入内容

  • element::after 在element元素内部的后面插入内容

    （此处的element代指所有标签元素）

    这个选择器是要写在style中的，见如下一个简单的小例子就能明白了

需要注意的是：

  1. before和after创建的元素属于行内元素
  2. before和after必须要有content属性，假如不给content赋值，也要写content：“”

大家可以多找几个before和after的小例子练习，如下：

第一个非常简单，小小小练习

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
37
38
39
40
41
42
43
44
<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: rgb(250, 69, 105);
        }
        div::before{
            content:"www";
            width: 50px;
            height: 50px;
            display: block;
            /* 记住  是行内元素  要想有盒子 需要有display:block */
            background-color: cyan;
        }
        
        div::after{
            content:"aaa";
            width: 50px;
            height: 50px;
            background-color: darksalmon;
        }
    </style>
</head>
<body>
    <!-- 伪元素选择器

        ::before  在元素内部的前面插入内容
        ::after   在元素内部的后面插入内容

        注意：
        before和after创建的元素属于行内元素
        必须要有content属性
    
    -->
    <div></div>
</body>
</html>

第二个稍微有难度，效果如下：

大家可以结合代码稍加修改来理解before和after

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!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>
        div{
            height: 160px;
            width: 160px;
            position: relative;
            background-color:slategrey;
            margin: 140px auto;
        }
        div::before{
            content:"";
            height: 60px;
            width: 60px;
            /* position: absolute; */
            display: block;
            left:0;
            top:0;
            border-left: 5px solid coral;
            border-top: 5px solid coral;
        }
        div::after{
            content:"";
            height: 60px;
            width: 60px;
            position: absolute;
            right:0;
            bottom:0;
            border-right: 5px solid coral;
            border-bottom: 5px solid coral;
        }
        div:hover::before{
            transform: rotate(30deg) translate(64px,17px);
            transition: 1s;
        }
        div:hover::after{
            transform: rotate(30deg) translate(-66px,-17px);
            transition: 1s;
        }

    </style>
</head>
<body>
    <div></div>
</body>
</html>