（8）伪类选择器

伪类的语法：：+ 标签名（类名）

class-name:nth-child(number){
    color: firebrick;
}

伪类选择器优先级：高于标签低于id等于class

1、伪类选择器是通过物理结构层级查找，一层一层查找

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*PS:如果这里写1和2，则所有的内容都会更改，因为伪类选择器是通过物理结构一层一层查找，而整个页面中从上而下，首先html就是整个页面的第一结构，head是第二结构，body是第三结构，所以如果是1和2则整个页面全部会生效*/
        :nth-child(1){
            color: firebrick;
        }
    </style>
</head>
<body>
<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>

</body>
</html>

PS：每一个层次结构都可以生成很多层

2、一个父标签下有多个不同类型的子标签，伪类选择器如何查找

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*先将所有结构下的第3个标签找出来，在匹配选择器的类型li*/
        li:nth-child(3){
            color: firebrick;
        }
    </style>
</head>
<body>
<ul>
    <p>p标签</p>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
<div>
    <div>
        <div></div>
        <div></div>
    </div>
    <div>

    </div>
</div>
</body>
</html>

3、伪类选择器偶数（奇数）匹配

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*2n就是2的倍数，也就是匹配偶数位，如果是2n-1则就2的倍数-1，就是匹配奇数位*/
        li:nth-child(2n){
            color: firebrick;
        }
    </style>
</head>
<body>
<ul>
    <p>p标签</p>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
<div>
    <div>
        <div></div>
        <div></div>
    </div>
    <div>

    </div>
</div>
</body>
</html>

4、鼠标悬浮动画伪类选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*2n就是2的平方，也就是偶数，如果是2n-1则就是奇数位生效*/
        li:nth-child(2n){
            color: firebrick;
        }
    </style>

    <style>
        /*动画伪类选择器*/
        /*transition就是动画效果过渡效果，如果需求是动画触发和动画结束，则要写在这里*/
        /*transition有几个属性： 1、（1s 1s过渡效果展开的时间和延迟时间）延迟时间一般不会写，用户体验度不好 2、动画属性默认all 3、过渡曲线linear（线性）*/
        /*linear可以修改，在页面右键检查，然后右边下面的styles里面，可以看到标签下的linear，然后点击后可以出现线性调节，调节后复制过来，把linear黏贴替换掉即可*/
        .box{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            /*linear => cubic-bezier(0.05, 0.81, 0.42, -0.27)*/
            transition: 1s 1s all linear;
        }

        /*hover是给区域添加鼠标悬停放大的动画效果*/
        /*如果这里写 transition，则鼠标移走的时候会有一个突然结束的视觉，因为触发的时候有下面的参数，但是结束的时候没有参数，所以要写在最初的参数里面，这样结束的时候最初的参数依然存在*/
        /*如果需求是动画触发，结束不需要动画，则写在这里即可*/
        .box:hover{
            /*transition:1s;*/
            width: 400px;
            height: 400px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<ul>
    <p>p标签</p>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>

    <div class="box">

    </div>
</body>
</html>

猜你喜欢