9.选择器-CSDN博客

本文链接：https://blog.csdn.net/u011513939/article/details/74055355
选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        b, i{
            color:red;
        }

        b:hover{
            color:green;
        }

        .btn1:focus{
            width:200px;
        }

        .father > li:first-child{
            color:blue;
        }

        .father > li:last-child{
            font-style:italic;
        }

        .father > li:nth-child(2n){
            border:5px solid pink;
        }

        .father > li:nth-last-child(2){
            list-style:none;
        }

        .father>li:nth-of-type(3){
            text-decoration:underline;
        }

        .father:before{
            content:'我肚子饿了';
        }

        .father:after{
            content:'今早没吃饭';
        }

    </style>
</head>
<body>
    <!--
        选择器
        7.1 标签
        7.2 ID    #ID名
        7.3 class    .class名   重复, 多个  多个class名之间用 空格隔开
        7.4 关联
            选择器1: s1
            选择器2: s2

            s1 s2  匹配s1所有的后代元素s2
            s1>s2  匹配s1下的所有儿子s2
            s1+s2  匹配仅此于s1后的兄弟元素s2
            s1~s2  匹配s1后所有兄弟元素s2
        7.5 组合选择器
            s1, s2{
                css属性
            }
            多个选择器之间用 逗号 隔开, 给不同的选择器赋予相同的属性

        7.6 伪类选择器
            s1:hover{ css属性 }  只能对本身或者是后代元素起作用
            s1:hover s2    鼠标滑倒s1上 s2起作用

            s1:focus{}   获取到焦点自动触发css属性
        7.7 伪元素选择器
            s1:first-child   s1下的第一个元素
            s1:last-child    s1下的最后一个元素
            s1:nth-child(N)  2n偶数  2n+1奇数   odd奇数   even偶数
            s1:nth-last-child(N)
            s1:nth-of-type(N)
            s1:before
            s1:after


            s1:only-child
            s1:not()
            s1:empty

        注意点:
            相同的对象, 相同的属性, 最后一个起作用

        优先级:
            !important > Id > Class > 标签


     -->
     <b> 熊二： “大哥！你看，那货早上去抢劫银行被抓了！我们还是晚上去吧？”</b>
     <i> 熊大：“你个傻B！你不知道干坏事的早晚都会被抓吗！听哥的，咱们中午去！！！”</i>
     <u> </u>
     <br />
    <input type="text" class='btn1' />

    <ul class='father'>



        <li>求证: 1元=1分</li>
        <li class='jie'>解:</li>
        <ol>
            <li>1元 = 100分</li>
            <li class='fen'>=10分 * 10分</li>
            <li>=1角 * 1角</li>
            <li>=0.1元 * 0.1元</li>
            <li>=0.01元</li>
            <li>=1分</li>
        </ol>
        <li>证明完毕. 数学老湿哭了....因为,毫无破绽!</li>
        <li>oh no !! shit!!</li>


    </ul>


</body>
</html>