CSS高级系列之多种选择器及权重值

最新推荐文章于 2025-06-08 16:00:48 发布

JM_杰

最新推荐文章于 2025-06-08 16:00:48 发布

阅读量824

点赞数

CC 4.0 BY-SA版权

分类专栏： css选择器文章标签： css 标签 class

本文链接：https://blog.youkuaiyun.com/dapyandxpy/article/details/73135540

css选择器专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了CSS中的高级选择器用法，包括ID选择器、类选择器、属性选择器等，并详细解析了CSS权重计算规则，帮助读者理解并更精确地控制样式应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示多种选择器</title>
    <style type="text/css">
        /*标签选择器*/
        p{
            color: red;
        }
        /*类选择器 showClass就是类选择器的类名*/
        .showClass{
            color: cyan;
        }
        /*id选择器,showId就是这个id选择器的名字*/
        #showID{
            color: yellowgreen;
        }
        /*子选择器*/
        /*div标签的第一个阶级的span子标签的样式*/
        div>span{
            color: aquamarine;
        }
        /*后代选择器*/
        div strong{
            color: chartreuse;
        }
       /*组合选择器*/
        div, p{
            color: darkorchid;
        }
        /*通用选择器*/
        *{
            background-color: deeppink;
        }

    </style>
</head>
<body>
   <div>
       <span>我是div的子span标签</span>
       <p><span>我是div的子标签中的子标签</span></p>
   </div>

   <div>
       <strong>我是什么颜色呢</strong>
       <div>我又是什么<strong>颜色呢?</strong></div>
   </div>

   <div>我是用来演示组合选择器的div标签</div>
   <p>我是用来演示组合选择器的p标签</p>


<!--权重值-->
<!--就近原则-->
    <!--谁离当前标签近,那么就是用哪个选择器,-->
    <p>我显示的是就近原则的颜色</p>
    <!--id选择器>类选择器>标签选择器-->

    <!--<p id="idSelector" class="classSelector">-->
        <!--我显示的颜色-->
    <!--</p>-->
    <!--内联式>嵌入式-->
   <p class="classSelector">欧文</p>
   <p style="color: chartreuse" id="idSelector">
       我是用来显示内联式
   </p>

    <!--线面色数就叫权值-->
    <!--标签选择器:1-->
    <!--类选择器:10-->
    <!--id 选择器:100-->
    <!--内联选择器:1000-->
</body>
</html>