组合选择器与权重计算

最新推荐文章于 2022-04-06 21:32:38 发布

weixin_34014277

最新推荐文章于 2022-04-06 21:32:38 发布

阅读量170

点赞数

原文链接：http://www.cnblogs.com/hfjiang/p/7070155.html

版权

组合选择器

后代选择器 div p (选择所有后代p，与子元素选择器不同，子元素选择器只选择儿子一代)
并集选择器 div,p
交集选择器 div.d1
子元素选择器 div > p
序列选择器ul li:first-child 与 ul li:last-child
相邻兄弟选择器 div + p
普通兄弟选择器 div ~ p (读取html文档由上向下的，所以前面的兄弟不选择)

权重比较

权重案例01

<style type="text/css">
    #id1 .class2 div p {
        color: red;
    }
    div #id2 div p{
        color: blue;
    }
    div.class1 div.class2 div p {
        color: green;
    }
</style>
</head>
<body>
<div id="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3">
            <p>
            我是什么颜色？
            </p>
        </div>
    </div>
</div>

显示结果为红色，计算权重第一步，比较id class html的选择器数量，来计算权重大小。

权重案例02

<style type="text/css">
    #id2 #id3 p{
        color: red;
    }
    #id1 #id2 p{
        color: blue;
    }
</style>
</head>
<body>
<div id="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3">
            <p>
            我是什么颜色？
            </p>
        </div>
    </div>
</div>  
</body>

结果显示为蓝色，计算权重第二步，如果权重一样，那么后出现的会覆盖前面出现的。

权重案例03

<style type="text/css">
    #id1 #id2 #id3{
        color: red;
    }
    .class1 .class2 .class3 {
        color:green;
    }
     p{
        color: blue;
    }
</style>
</head>
<body>
<div id="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3">
            <p>
            我是什么颜色？
            </p>
        </div>
    </div>
</div>
</body>

结果显示为蓝色，比较权重第三步，看看选择器是否直接选中目标元素，如果没有选择目标元素，则权重为0，

权重案例04

<style type="text/css">
    #id2 #id3 {
        color: red;
    }
    #id1 #id2 {
        color:green;
    }
</style>
</head>
<body>
<div id="id1" class="class1">
    <div id="id2" class="class2">
        <div id="id3" class="class3">
            <p>
            我是什么颜色？
            </p>
        </div>
    </div>
</div>
</body>

结果显示为红色，计算权重第四步，如果都没有选中目标元素，那么谁离目标近就听谁的。