【17】CSS基础（2）——选择器③选择器权重

★最后有选择器部分的思维导图总结

一、为什么比较选择器权重？

因为：权重高的会层叠权重低的。（关于层叠性，后面会继续分享）

二、权重比较

（一）基础选择器的权重；

1.比较方法：根据选择范围，范围越大权重越小：
*<标签选择器<类选择器<id选择器。
示例

<DOCTYPE html>
<html>
    <head>
       <title>基础选择器权重比较示例</title>
       <style> .run {
      color: blue; } span {
      /*虽然是后写的，当时标签选择器权重比类选择器权重小*/ color: red; /*所以最后颜色也是显示blue*/ } </style>
    </head>
    <body>
            <p >今天做了瑜伽</p>
            <span class="run">跑了步</span>
    </body>
</html>

（二）高级选择器的权重；

1.比较步骤：
①依次比较组成高级选择器的id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。
★比较顺序∶（id 个数，类的个数，标签的个数）
②如果选择器权重都相同，需要比较CSS中代码的书写顺序，后写的层叠先写的。

示例1

<DOCTYPE html>
<html>
    <head>
       <title>高级选择器权重比较示例</title>
       <style> .exercise p.run {
      /*两个类，一个标签*/ color: blue; } .exercise .run {
      /*两个类*/ color: red; } </style>
    </head>
    <body>
        <div>
            <div>
               <p >今天真开心</p>
               <p>学习使我快乐</p>
               <p>继续加油</p>
            </div>
            <div class="exercise">
                <p>今天做了瑜伽</p>
                <p class="run">跑了步</p>
            </div>
            <div>
                <p>今天吃了大盘鸡</p>
                <p>喝了胡萝卜汁</p>
            </div>
        </div>
    </body>
</html>


-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
示例2

<DOCTYPE html>
<html>
    <head>
       <title>高级选择器权重比较示例</title>
       <style> .exercise p.run {
      /*两个类 一个标签*/ color: blue; } div .exercise .run {
      /*两个类，一个标签*/ color: red; /*都一样权重，后写的层叠先写的*/ } </style>
    </head>
    <body>
        <div>
            <div>
               <p >今天真开心</p>
               <p>学习使我快乐</p>
               <p>继续加油</p>
            </div>
            <div class="exercise">
                <p>今天做了瑜伽</p>
                <p class="run">跑了步</p>
            </div>
            <div>
                <p>今天吃了大盘鸡</p>
                <p>喝了胡萝卜汁</p>
            </div>
        </div>
    </body>
</html>

选择器部分总结

★下篇继续：CSS基础（3）——层叠性和继承性…