css选择器以及权重关系

我家小姨超级可爱
149 阅读4分钟

CSS选择器完全指南

CSS选择器是CSS语言中用于选择页面元素并应用样式规则的关键部分。随着CSS的发展，选择器的种类也在不断增加，提供了更多灵活和强大的方式以选中和样式化HTML元素。探讨CSS选择器的不同种类，包括基础选择器、组合选择器、伪类选择器、属性选择器以及更高级的选择器如:has()（尽管这不是所有浏览器都支持的）。

基础选择器

基础选择器是CSS中最常用的选择器，用于选择页面上的元素。

  • 元素选择器：直接通过元素的名称来选择。

    css
div { color: blue; }

  • 类选择器：通过元素的class属性来选择。

    css
.my-class { background-color: yellow; }

  • ID选择器：通过元素的id属性来选择。

    css
#my-id { font-size: 20px; }

组合选择器

组合选择器用于组合基础选择器，以更精确地选中元素。

  • 后代选择器：选择作为某元素后代的所有元素。

    css
div span { font-style: italic; }

  • 子选择器：选择作为某元素直接子代的所有元素。

    css
div > span { font-weight: bold; }

  • 相邻兄弟选择器：选择紧接在指定元素后的兄弟元素。

    css
h1 + p { color: green; }

  • 通用兄弟选择器：选择指定元素后面所有的兄弟元素。

    css
h1 ~ p { color: red; }

伪类选择器

伪类选择器用于选择处于特定状态的元素。

  • 链接伪类：:link, :visited

    css
a:link { color: blue; }
a:visited { color: purple; }

  • 动态伪类：:hover, :active, :focus

    css
a:hover { text-decoration: underline; }

  • 结构伪类：:first-child, :last-child, :nth-child()

    css
li:nth-child(2) { font-weight: bold; }

  • 否定伪类：:not()

    css
div:not(.my-class) { color: black; }

属性选择器

属性选择器允许你根据元素的属性及其值来选择元素。

  • 简单属性选择器：[attribute]

    css
[type="text"] { border: 1px solid black; }

  • 属性值包含：[attribute*="value"]

    css
[class*="highlight"] { background-color: yellow; }

  • 属性值开始：[attribute^="value"]

    css
[id^="section"] { color: red; }

  • 属性值结束：[attribute$="value"]

    css
[src$=".jpg"] { border: none; }

高级选择器

随着CSS的发展，一些新的选择器被引入，提供了更高级的功能。

  • 选择器组：group

    css
h1, h2, h3 { color: #333; }

  • 伪元素选择器：::before, ::after

    css
p::before { content: "Note: "; font-weight: bold; }

:has() 选择器

:has() 是一个实验性的选择器，它允许你选择包含特定后代的元素。这个选择器在某些浏览器中可能不被支持。

css
/* 选择包含至少一个class为'my-class'的后代的元素 */


div:has(.my-class) { background-color: lightgray; }

权重的基本概念

CSS选择器的权重由以下四个主要部分组成：

  1. 行内样式：直接在HTML元素的style属性中定义的样式，权重最高。
  2. ID选择器：每个ID选择器为元素增加100点权重。
  3. 类选择器、属性选择器和伪类：每个类选择器、属性选择器和伪类选择器为元素增加10点权重。
  4. 元素选择器和伪元素：每个元素选择器和伪元素选择器为元素增加1点权重。

权重的计算

权重是累加的，这意味着一个选择器中包含的ID、类、属性和元素的数量将决定其总权重。例如：

  • div（元素选择器）：权重为1。
  • .my-class（类选择器）：权重为10。
  • #my-id（ID选择器）：权重为100。
  • div.my-class（元素和类选择器）：权重为11。
  • #my-id.my-class（ID和类选择器）：权重为110。

重要规则

在CSS中，!important规则可以用来覆盖其他所有规则。当你在样式声明后添加!important，这条规则将被赋予最高优先级，无论其权重如何。但应谨慎使用!important，因为它可能导致样式难以维护和调试。

css
.my-class {
  color: red !important;
}

选择器的层叠

当多个规则应用于同一个元素时，浏览器会根据以下规则决定哪个规则生效：

  1. 权重最高的规则：权重高的规则会覆盖权重低的规则。
  2. 最近的规则：如果权重相同，那么在样式表中最后出现的规则将被应用。
  3. 源码顺序：如果规则来自不同的样式表，那么在HTML文档中后面出现的样式表中的规则将覆盖前面的。

实践中的权重

在实际开发中，合理地使用选择器权重可以帮助你避免不必要的冲突和复杂性。以下是一些建议：

  • 避免过度使用ID选择器：由于ID选择器的权重很高，过度使用可能导致样式难以覆盖。
  • 使用类选择器：类选择器的权重适中，是样式化元素的常用选择。
  • 利用组合选择器：通过组合选择器（如后代选择器、子选择器）来增加权重，而不是仅仅依赖于增加类或ID。
avatar
文章
阅读
粉丝