CSS选择器优先级以及复杂选择器的权重计算 - 【大前端】

CSS选择器的优先级

!important > 行间样式 > id > class|属性|伪类 > 标签选择器|伪元素 > 通配符

复杂的选择器

CSS选择器权重值主要用于复杂选择器的权重计算,一般的选择器依据优先级判断即可。

1. 父子选择器/派生选择器

<div>
    <strong>
        <em>234</em>
    </strong>
</div>
div strong em{
    background-color: red;
}

效果如下(浏览器页面放大了5倍,方便观察,下文不再特殊说明):