CSS中的优先级(1/2)

如果 

由上可见，当网页比较复杂， HTML 结构嵌套较深时，一个标签的样式将深受其祖先标签样式的影响。影响的规则是：

CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。

例1：

<divstyle="color: red"><divstyle="color: blue"><divclass="son">div>div>div>

如果我们把一个标签从祖先那里继承来的而自身没有的属性叫做“祖先样式”，那么“直接样式”就是一个标签直接拥有的属性。又有如下规则：

CSS 优先规则2：“直接样式”比“祖先样式”优先级高。

例2：

<divstyle="color: red"><divclass="son"style="color: blue">div>div>

选择器的优先级

上面讨论了一个标签从祖先继承来的属性，现在讨论标签自有的属性。在讨论 CSS 优先级之前，先说说 CSS 7 种基础的选择器：

• ID 选择器， 如 #id{}

• 类选择器， 如 .class{}

• 属性选择器， 如 a[href="segmentfault.com"]{}

• 伪类选择器， 如 :hover{}

• 伪元素选择器， 如 ::before{}

• 标签选择器， 如 span{}

• 通配选择器， 如 *{}

  1 2 下一页