[分享]css中id和class的优先级

CSS样式中，id和class是两个常用的选择器，它们都有自己的优先级。下面我们来详细了解一下这两者的优先级。 id { / 以id为选择器 / color: 333333; } .class { /...

CSS样式中，id和class是两个常用的选择器，它们都有自己的优先级。下面我们来详细了解一下这两者的优先级。

 #id {   /* 以id为选择器 */
        color: #333333;
    }
    .class {   /* 以class为选择器 */
        color: #666666;
    }
    div {   /* 以标签名为选择器 */
        color: #999999;
    } 

首先来看id，id的优先级是最高的，因为它是唯一的标识符，所以在样式中只要出现了id选择器，它所定义的样式就是最终生效的。

接下来是class，class选择器的优先级次于id，但是它可以重复使用，所以如果class选择器的数量和样式相同，则后面的class会覆盖前面的。

最后是标签名选择器，它的优先级最低，如果出现了多个标签名选择器，则选择最后一个出现的。

  <div id="app" class="box">   /* id在前，class在后 */
            <p class="text">这是一段文字</p>
        </div> 

以上是一个简单的例子，假设所有的样式都在上面的样式中定义了。优先级顺序是：id > class > 标签名。因此，“app”这个div会应用#id选择器中定义的样式，文本字体颜色是#333333，后面的“.box” class选择器会覆盖前面的标签名选择器，文本颜色变成了#666666，最后，“text”这个class选择器样式会应用于文本，字体颜色变成了#666666。

总之，在编写CSS样式时，需要非常注意选择器的优先级，避免样式覆盖造成的错误。