CSS中各个选择器及其优先级

一、各类选择器概述

1、继承选择器

如下面这段html代码：

<div>
        <p>我是一段文字哦</p>
</div>

对应css代码：

div {
            color: brown;
 }

定义的时候是针对div元素的颜色变更，但由于p是div的孩子，会继承div的颜色属性。效果预览：
通过DevTools开发者工具（Edge浏览器下按F12可以打开）能够看到：

2、通配选择器

概述（建议结合其他选择器理解）

（引用自MDN----https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors）
示例

*[lang^=en]{color:green;}
/*效果等同于类选择器*/
*.warning {color:red;}
/*效果等同于ID选择器*/
*#maincontent {border: 1px solid blue;} 

3、元素选择器

直接针对元素的修饰：
（针对超链接元素a，进行的直接修饰）

a	{
            color: #fff;
            display: inline-block;
            height: 50px;
            width: 100px;
            text-align: center;
            text-decoration: none;
            line-height: 50px;
            
        }

对应的html代码：

<div>
        <a id="bg1" href="">五彩导航</a>
        <a id="bg2" href="">五彩导航</a>
        <a id="bg3" href="">五彩导航</a>
        <a id="bg4" href="">五彩导航</a>
        <a id="bg5" href="">五彩导航</a>
</div>

预览效果图：

4、类选择器

对定义了类名的元素进行批量修饰：
css代码：

.Test1 {
            color:aqua;
        }
        .not {
            color: blueviolet;
}

html代码：

<div>
        <p class="Test1">我是一段文字</p>
        <p class="Test1">我是一段文字</p>
        <p class="not">我是一段文字</p>
        <p class="Test1">我是一段文字</p>
        
</div>

预览效果：

5、伪类选择器

常用于对链接元素a进行的修饰：
a : link /选择所有未被访问的链接/
a : visited /选择所有已被访问的链接/
a : hover /选择鼠标指针位于其上的链接/
a : active /选择活动链接〔鼠标按下未弹起的链接）/

css代码：

a {
            /* 这里将行内元素a定义为了块元素，方便查看效果 */
            display: block;
            height: 50px;
            width: 100px;
            background-color: aquamarine;
        }
        a:hover {
            background-color: blueviolet;
        }

html代码：

<a href="">
        我是一个链接
    </a>

预览效果：
鼠标放上去前：

放上去后：

6、ID选择器

对设置了id的元素进行针对修饰：
css代码：

#Test2 {
            height: 100px;
            width: 200px;
            /* 取消链接文字自带的下划线 */
            text-decoration: none;
        }

html代码：

<div>
        <a id="Test2" href="">我是一个链接</a>
    </div>

预览效果：

7、行内设置样式style：

还是用上面id选择器示例代码，但是在html代码中加入style设置。
css代码：

#Test2 {
            height: 100px;
            width: 200px;
            /* 取消链接文字自带的下划线 */
            text-decoration: none;
        }

html代码：

<div>
        <a id="Test2" href="" style="height: 200px;width: 200px;">我是一个链接</a>
    </div>

效果预览：

注意！我们在这可以看到，ID选择器和行内选择器在height和width的设置上发生了冲突，但是生效的却是行内选择器，这里就体现了不同权重带来的优先级效果。

8、为元素修饰设置important

继续使用行内样式style示例代码，对css部分修改（为块高度height加入important声明）：
css代码：

#Test2 {
            height: 100px!important;
            width: 200px;
            /* 取消链接文字自带的下划线 */
            text-decoration: none;
        }

html代码：

<div>
        <a id="Test2" href="" style="height: 200px;width: 200px;">我是一个链接</a>
    </div>

这里我们容易发现块的高度又变成了100px，能看出important的声明能使得修饰的优先级达到最高

二、各类选择器权重表以及案例讲解

**

需要注意，权重值不能进位只能叠加。
例如下面css代码：

body ul li {
        color: blue;
      }

三个全是元素选择器，权重叠加后是0，0，0，3，如果在其下面有代码：

li {
        color: red;
  }

那么下面这个权重是0，0，0，1，小于上面的权重，故最后元素li中的文字显示为蓝色。如下图

html代码为：

<ul>
        <li>Test1</li>
        <li>Test2</li>
        <li>Test3</li>
        <li>Test4</li>
    </ul>

建议自己动手试试，加深印象
如果给ul元素设置一个类选择器如下：
html代码：

<ul class="table">
        <li>Test1</li>
        <li>Test2</li>
        <li>Test3</li>
        <li>Test4</li>
    </ul>

css代码：

		body ul li {
        color: blue;
        }
        li {
        color: red;
        }
        .table li {
            color: green;
        }

那么我们容易算出，第一段css选择器权重叠加后为0，0，0，3；第二段0，0，0，1；第三段0，0，1，1；通俗可以看作3，1，11，明显11这个数字最大，那么最后元素li中的字体颜色会成为第三段的颜色：

如果父父子子嵌套很多很多层，最后累计10层呢？如果只使用元素选择器，那么其权重为0，0，0，10，不存在进位。