理解CSS优先级计算：规则与权重解析

78 浏览量更新于2024-08-31 收藏 71KB PDF 举报

"这篇文章主要探讨了CSS优先级计算的规则，包括CSS的引入方式和选择器的权重。" 在CSS中，优先级的计算对于决定哪个样式生效至关重要。以下是关于CSS优先级计算的一些详细规则： **一、CSS的引入方式** 1. **内联样式（Inline Styles）** - 直接在HTML元素中使用`style`属性，如`<bodystyle="background:yellow;">`。内联样式的优先级是最高的。 2. **内部样式表（Internal Style Sheets）** - 通过`<style>`标签在HTML文档的`<head>`部分定义样式，如`<style type="text/css">body{background:red;}</style>`。它们的优先级低于内联样式，但高于外部样式表。 3. **外部样式表（External Style Sheets）** - 通过`<link>`标签引入外部CSS文件，如`<link rel="stylesheet" type="text/css" href="body.css">`。外部样式表的优先级最低，但如果多个样式规则冲突，后引入的样式将覆盖之前的样式。 **二、选择器的权重（Specificity）** 1. **ID选择器** - 使用`#`标识符，例如`#id_p`。每个ID选择器的权重为100。 2. **类选择器、属性选择器和伪类** - 每个类、属性或伪类选择器的权重为10。 3. **标签选择器和伪元素** - 每个标签或伪元素选择器的权重为1。 4. **通用选择器、子选择器、相邻兄弟选择器等** - 通配符`*`、子选择器`>`、相邻兄弟选择器`+`等的权重为0。权重的计算是将每个选择器的权重相加。如果两个或更多的样式规则具有相同的权重，那么最新的（最靠近元素的）样式将会胜出。这就是所谓的“就近原则”。例如，一个`id`选择器（权重100）比一个`class`选择器（权重10）和一个标签选择器（权重1）的组合（权重21）具有更高的优先级。如果有两个相同的ID选择器，如上述示例中的`<p id="id_p">`，尽管不推荐，但它们都会应用样式，因为ID的权重高于其他选择器。在实际开发中，理解这些规则有助于避免不必要的样式冲突，并确保样式按预期工作。正确使用CSS优先级可以帮助提高代码的可维护性和性能，减少不必要的样式重写。在编写CSS时，尽量避免使用过于具体的选择器，以保持样式规则的简洁和可读性。

CSS优先级计算的规则优先级计算的规则

主要介绍了CSS优先级计算的规则,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过

来看看吧

最近在学习CSS优先级计算的规则这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

CSS的权重的权重

一、一、CSS的引入方式的引入方式

1.在节点元素上，使用style属性

2.通过link引入外部文件

3.通过style标签在页面内引入

三种引入方式的区别

index.html文件

<!DOCTYPE html>

<head>

<title>Document</title>

body {

background: red;

}

</style>

</head>

</body>

</html>

body.css文件

body {

background: green;

}

1.第一种方式相对后面两种优先级高，与引入顺序无关无论link和style标签放在head内，还是放在body内，或者放在html标签

结尾，页面都会呈现yellow

2.第二种和第三种为平级引入，后引入的样式覆盖之前的引入样式去掉body上的style标签

调整link和style标签的先后顺序。link在前，style标签在后，页面呈现red，相反，页面会呈现green

二、获取节点的方式二、获取节点的方式

1.id

2.class

3.标签

4.属性

在一个页面中id值应该是唯一，但是，当出现多个相同id时，样式对所有id节点是有效的，使用方式：#后面跟节点id值

<body>

<p id="id_p">第一个段落</p>

<p id="id_p">第二个段落</p>

</body>

#id_p {

color: red;

}

结果显示，两个段落中的文字都呈现red

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38744778

粉丝: 7
资源: 917

理解CSS优先级计算：规则与权重解析

CSS优先级算法如何计算？有哪些判定规定及计算方式

css优先级总结

css优先级计算方法(推荐)

CSS优先级规则的细节

深入理解CSS优先级：规则与应用详解

css 优先级关系

CSS 优先级使用技巧

老调重弹的CSS优先级

CSS 优先级 详细分析

CSS 优先级问题详解

最新资源

CSS 优先级详细分析