css选择器的优先级以及用法

在 CSS 中，当多个选择器同时作用于一个元素，并且为该元素的同一属性设置了不同的值时，就需要依据选择器的优先级来确定最终应用哪个样式。本文详细介绍 CSS 选择器优先级的相关内容。

本文目录

- - 一、单个选择器的优先级
  - - 1. 内联样式
    - 2. ID 选择器
    - 3. 类选择器、属性选择器和伪类选择器
    - 4. 元素选择器和伪元素选择器
    - 5. 通用选择器和组合器
  - 二、多个优先级计算规则
  - 三、!important 声明

一、单个选择器的优先级

1. 内联样式

直接写在 HTML 元素的 style 属性中的样式。

<p style="color: red;">使用内联样式的段落</p>

优先级：内联样式具有最高的优先级，因为它直接作用于元素，会覆盖其他所有类型选择器定义的样式。

2. ID 选择器

通过元素的 id 属性来选择元素，使用 # 符号开头。

<!DOCTYPE html>
<html lang="en"><head><style>#unique-paragraph {color: blue;}</style>
</head><body><p id="unique-paragraph">使用 ID 选择器设置样式的段落</p>
</body></html>

优先级：ID 选择器的优先级仅次于内联样式，因为 id 在一个页面中是唯一的，它能精确地定位到特定元素。

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

类选择器
通过元素的 class 属性来选择元素，使用 . 符号开头。

<!DOCTYPE html>
<html lang="en"><head><style>.highlight {background-color: yellow;}</style>
</head><body><p class="highlight">使用类选择器设置样式的段落</p>
</body></html>

属性选择器
根据元素的属性及其值来选择元素，例如 [attribute=value] 的形式。

<!DOCTYPE html>
<html lang="en"><head><style>input[type="text"] {border: 1px solid gray;}</style>
</head><body><input type="text" placeholder="请输入文本">
</body></html>

伪类选择器
用于选择处于特定状态的元素，如 :hover（鼠标悬停状态）、:active（元素被激活状态）等。

<!DOCTYPE html>
<html lang="en"><head><style>a:hover {color: red;}</style>
</head><body><a href="#">链接</a>
</body></html>

优先级：类选择器、属性选择器和伪类选择器的优先级相同，它们的优先级低于 ID 选择器，但高于元素选择器。

4. 元素选择器和伪元素选择器

元素选择器
通过元素的标签名来选择元素，如 p、h1、div 等。

<!DOCTYPE html>
<html lang="en"><head><style>p {font-size: 16px;}</style>
</head><body><p>使用元素选择器设置样式的段落</p>
</body></html>

伪元素选择器
用于选择元素的特定部分，如 ::first-line（选择元素的第一行）、::first-letter（选择元素的第一个字母）等。

<!DOCTYPE html>
<html lang="en"><head><style>p::first-line {color: green;}</style>
</head><body><p>第一行文字会显示为绿色。</p>
</body></html>

优先级：元素选择器和伪元素选择器的优先级相同，是优先级较低的选择器类型。

5. 通用选择器和组合器

通用选择器
使用 * 符号表示，它可以选择页面中的所有元素。

<!DOCTYPE html>
<html lang="en"><head><style>* {margin: 0;padding: 0;}</style>
</head><body><!-- 页面内容 -->
</body></html>

组合器：如 +（相邻兄弟组合器）、~（通用兄弟组合器）、>（子组合器）、（后代组合器）等，它们本身不具有优先级，只是用于组合其他选择器。
优先级：通用选择器的优先级是最低的，组合器的优先级取决于与之组合的选择器。

二、多个优先级计算规则

当多个选择器同时作用于一个元素时，可以通过计算每个选择器的优先级得分来确定最终应用的样式。通常采用以下规则来计算优先级：

内联样式：计为 1000 分。
ID 选择器：每个 ID 选择器计为 100 分。
类选择器、属性选择器和伪类选择器：每个计为 10 分。
元素选择器和伪元素选择器：每个计为 1 分。
通用选择器：计为 0 分。

下面按照上面进行分析

<!DOCTYPE html>
<html lang="en"><head><style>/* 元素选择器，优先级为 1 分 */p {color: black;}/* 类选择器，优先级为 10 分 */.text-style {color: blue;}/* ID 选择器，优先级为 100 分 */#special-paragraph {color: red;}</style>
</head><body><p>普通段落，文字颜色为黑色</p><p class="text-style">使用类选择器设置样式的段落，文字颜色为蓝色</p><p id="special-paragraph" class="text-style">同时使用 ID 选择器和类选择器的段落，文字颜色为红色，因为 ID 选择器优先级更高</p>
</body></html>

第三个段落同时应用了 ID 选择器和类选择器，但由于 ID 选择器的优先级（100 分）高于类选择器（10 分），所以最终文字颜色为红色。

三、!important 声明

在 CSS 中，还可以使用 !important 声明来强制应用某个样式，无论该样式的选择器优先级如何。

p {color: green!important;
}

使用 !important 声明的样式会覆盖其他所有样式

← 上一篇 AngularJS知识快速入门（上）

记得点赞、关注、收藏哦！

下一篇 Ajax——在OA系统提升性能的局部刷新 →

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/88657.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/88657.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！