CSS选择器

最新推荐文章于 2024-07-10 16:12:49 发布

追梦女孩ii

最新推荐文章于 2024-07-10 16:12:49 发布

阅读量499

点赞数 14

分类专栏： HTML 文章标签： css 前端数据分析 python

本文链接：https://blog.csdn.net/m0_61566562/article/details/139965373

版权

HTML 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*    CSS 选择器    */
        /*    标签选择器    */
        div{color:red}

        /*    id 选择器  前面一定要加 #  */
        #box3{background:blue}

        /*    class选择器/类选择器  前面一定要加 .  表示一系列  font-family用于改变字体样式*/
        .abc{font-family: "宋体"}

        /*    通配符选择器    */
        * {font-size : 20px}

        /*    群组选择器    逗号连接  text-decoration:None 去下划线 */
        #box ,#box3, p{text-decoration:underline}
        #box ,#box3, p{text-decoration:None}

        /*    包含选择器/后代选择器    */
        /*    层级选择器    */
        /*    子元素选择器   >  */
        #box4 > a {color:red;}
        /*    后代选择器   ' '  */
        #box4 a {background:gold;}
        #box4 .ff {background:pink;}

        /*
           选择器优先级
           内联选择器(1000)  > id选择器（100）  >  class选择器(10)  >  标签选择器(1)

           */
    </style>

</head>
<body>

        <div id = "box" class = "abc">中国男足成功进入18强</div>
        <div id = "box2" class = "abc">中国男足成功进入18强</div>
        <div id = "box3" >中国男足成功进入18强</div>
        <p>中国男足成功进入18强</p>
        <hr>

        <div id = "box4">
            <div>
                <a href="#" class = 'ff'>百度一下</a>
            </div>
            <a href="#">搜狗一下</a>
        </div>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*    CSS 选择器    */
        /*    标签选择器    */
        div{color:red}

        /*    id 选择器  前面一定要加 #  */
        #box3{background:blue}

        /*    class选择器/类选择器  前面一定要加 .  表示一系列  font-family用于改变字体样式*/
        .abc{font-family: "宋体"}

        /*    通配符选择器    */
        * {font-size : 20px}

        /*    群组选择器    逗号连接  text-decoration:None 去下划线 */
        #box ,#box3, p{text-decoration:underline}
        #box ,#box3, p{text-decoration:None}

        /*    包含选择器/后代选择器    */
        /*    层级选择器    */
        /*    子元素选择器   >  */
        #box4 > a {color:red;}
        /*    后代选择器   ' '  */
        #box4 a {background:gold;}
        #box4 .ff {background:pink;}

        /*
           选择器优先级
           内联选择器(1000)  > id选择器（100）  >  class选择器(10)  >  标签选择器(1)

           */
    </style>

</head>
<body>

        <div id = "box" class = "abc">中国男足成功进入18强</div>
        <div id = "box2" class = "abc">中国男足成功进入18强</div>
        <div id = "box3" >中国男足成功进入18强</div>
        <p>中国男足成功进入18强</p>
        <hr>

        <div id = "box4">
            <div>
                <a href="#" class = 'ff'>百度一下</a>
            </div>
            <a href="#">搜狗一下</a>
        </div>


</body>
</html>