css_10_选择器优先级

选择器优先级

行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

• 作用：当同一元素的样式冲突时，需要看优先级。
• 详细公式：

格式：（a，b，c）

a：ID选择器的个数
b：类、伪类、属性选择器的个数
c：元素、伪元素选择器的个数

从左到右依次比较大小。

• 举例：

（1,0,0）>(0,2,1)

    <div class="container">
        <p>
            <span class="selector" id="range">这是在说选择器的优先级</span>
        </p>
    </div>

        #range {
            color: orange;
        }
        .container span.selector {
            color: red;
        }

成果展示：

• 简而言之：
  !important>行内选择器> ID选择器 > 类选择器 > 属性选择器>伪类选择器>元素选择器 > 通配选择器>继承选择器
• 注意：
  1.!important的优先级大于所有行内样式，大于所有选择器
  2.行内样式的优先级大于所有选择器