css中标签优先级

CSS是一种用于样式控制的语言，我们可以通过它来布局网页并装饰页面

在CSS中，各种选择器都有不同的作用，同时也存在优先级的差别

对于被选中的同一个元素，根据不同的选择器赋予的样式，存在一定的优先级差别，这种差别就叫做优先级

selectors {
  style1;
}

#id_name {
  style2;
}

.class_name {
  style3;
}

p {
  style4;
}

p:first-child {
  style5;
}

div p {
  style6;
} 

以上代码中的选择器依次为：

1.元素选择器(selectors)；

2.ID选择器(#id_name)；

3.类选择器(.class_name)；

4.标签选择器(p)；

5.伪类选择器(p:first-child)；

6.后代选择器(div p)。

这些选择器根据优先级排序如下所示：

1.行内样式

2.ID选择器

3.类选择器、属性选择器、伪类选择器

4.元素选择器、伪元素选择器、通配符选择器

5.通配符选择器

那么在实际应用中我们如何根据优先级来确定我们样式的应用呢？

我们可以在chrome浏览器的控制台中使用“Element”标签，查看页面元素的样式应用情况，并分别查看样式的来源

在案例中，我们为p元素设置了6种样式，我们查看该元素的样式如下所示：

p {
  color: red;
}

.div p {
  font-size: 16px;
}

.first {
  background-color: blue;
}

#second {
  text-align: center;
}

.second {
  font-weight: bold;
}

p {
  font-style: italic;
} 

我们可以看到，该元素的应用样式为：

 color: red;  /* 标签选择器的样式 */
    font-style: italic;  /* 标签选择器的样式 */
    font-size: 16px;  /* 后代选择器的样式 */
    font-weight: bold;  /* 类选择器的样式 */
    text-align: center;  /* ID选择器的样式 */ 

可以发现，元素选择器、后代选择器、类选择器、ID选择器的样式都被应用了，样式的优先级由高到低依次是：

ID选择器 > 类选择器 > 后代选择器 > 元素选择器

所以，在我们编写CSS代码的时候，需要充分考虑样式的优先级，以免因为优先级的问题导致样式无法达到我们的预期效果