8.选择器-CSDN博客

本文链接：https://blog.csdn.net/u011513939/article/details/74055220
选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        b{
            font-size:25px;
        }


        #nurse{
            /* 系统文件字体  C:/windows/Fonts/    */
            font-family:华文彩云;
        }




        .girl2{
            color:#ccc;
            text-decoration:overline;
        }

        .girl{
            /* 取消下划线 */
            text-decoration:none;
        }

        #a{
            color:red;
        }

        .b{
            color:blue !important;
        }

        del{
            color:green;
        }


        .father .jie{
            color:purple;
        }

        .father > li{
            font-size:30px;
        }


        .fen + li{
            font-family:楷体;font-size:20px;
        }

        .fen ~ li{
            font-weight:bold;font-family:黑体;font-size:28px;
        }

    </style>
</head>
<body>
    <!--
        选择器
            1. 标签选择器
                   会获取页面所有的指定标签
            2. ID 选择器
                    格式:  #ID名       id='xxx'
                    ID不能重复, 不能多个

            3. class选择器   类选择器
                    格式:  .class名
                    class名可以重复, 可以多个
                    相同的对象,相同的属性,最近的一个样式起作用,前面都被覆盖掉 (就近原则)


            注意点:
               !important > id > class > 标签

            4. 关联选择器
                    选择器1 选择器2 :  选择器1 后代
                    选择器1 > 选择器2 :   选择器1的下的儿子选择器2(不算孙子,以及更加后代)
                    兄弟元素1 + 兄弟元素2  (仅次于兄弟1的兄弟2)
                    所有的兄弟元素 用 ~ 连接  ( 找到兄弟之后的所有元素)
     -->
    <b>这年头,只有不伤手的立白, 哪有不分手的恋爱. 遇事看开点....</b>
    <i id='nurse'>陪朋友去医院, 要抽血, 抽到一半的,护士打了个喷嚏,只见针头一下全扎进去了......</i>
    <br />
    <u class='girl girl2'>在火车站，看到一妹子后背拉链没拉好，俺上去帮她拉上去了，妹子回头就是一巴掌。好了，俺以为她不喜欢拉上去，又给她拉下来了，妹子回头又是两巴掌·····</u>
    <del id='a'  class='b'>怀才就跟怀孕一样, 时间就了才能让人看得出来</del>

    <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>