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

本文深入探讨了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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值