css 优先级关系

CSS 优先级关系决定了当多个 CSS 规则同时作用于同一个元素时，哪一条 CSS 规则会被优先应用。具体来说，CSS 优先级关系是根据优先级值进行比较的，优先级值越大的 CSS 规则越具有优先权。下面我将一步步为您介绍 CSS 优先级关系的完整攻略。

一、优先级值的计算规则

优先级值是由选择器中的各个组成部分共同组成的。下面是各个部分的优先级值：

选择器部分	优先级值
ID选择器	100
类选择器、属性选择器	10
类型选择器	1
通配选择器	0

例如，下面的选择器的优先级值为：100+10+1+0=111

#myDiv .myClass p {}

如果两条规则的优先级相同，那么后定义的规则具有更高的优先级。

二、示例说明

示例一

HTML 代码：

<div class="wrapper">
  <p class="text">Hello, world!</p>
</div>

CSS 代码：

.wrapper p {
  color: red;
}

.text {
  color: blue;
}

由于 .text 选择器的优先级值比 .wrapper p 选择器的优先级值低，所以最终 <p> 元素的颜色会被设置为蓝色。

示例二

HTML 代码：

<div class="wrapper">
  <p id="myText" class="text">Hello, world!</p>
</div>

CSS 代码：

#wrapper p {
  color: red;
}

#myText {
  color: blue;
}

由于 #myText 选择器的优先级值比 #wrapper p 选择器的优先级值高，所以最终 <p> 元素的颜色会被设置为蓝色。

以上就是 CSS 优先级关系的完整攻略。希望能对您有所帮助！