CSS选择器种类、优先级与匹配原理详解

1. CSS选择器种类

CSS选择器是用来选择HTML或XML文档中需要应用样式的元素的一种方式。下面介绍一些常见的CSS选择器种类：

1.1 元素选择器（Element Selector）

元素选择器通过元素名称来选择元素。比如，p选择器选择所有的<p>元素。

p {
  color: red;
}

1.2 ID选择器（ID Selector）

ID选择器使用元素的id属性来选择元素。id必须是唯一的，所以对应的选择器也是唯一的。比如，#my-id选择器选择id为"my-id"的元素。

#my-id {
  font-weight: bold;
}

1.3 类选择器（Class Selector）

类选择器使用元素的class属性来选择元素。一个元素可以有多个class，所以多个元素可以共享相同的class选择器。比如，.my-class选择器选择所有class为"my-class"的元素。

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

1.4 属性选择器（Attribute Selector）

属性选择器根据元素的属性来选择元素。有一些常见的属性选择器：

• [attribute]: 选择拥有指定属性的元素，不论属性值是什么。
• [attribute=value]: 选择拥有指定属性且属性值等于指定值的元素。
• [attribute~=value]: 选择拥有指定属性且属性值中包含指定值的元素。
• [attribute^=value]: 选择拥有指定属性且属性值以指定值开头的元素。
• [attribute$=value]: 选择拥有指定属性且属性值以指定值结尾的元素。
• [attribute*=value]: 选择拥有指定属性且属性值包含指定值的元素。

/* 选择所有带有target属性的<a>元素 */
a[target] {
  color: blue;
}

/* 选择所有class包含"btn"的<button>元素 */
button[class~=btn] {
  background-color: green;
}

1.5 伪类选择器（Pseudo-class Selector）

伪类选择器用于选择处于某种特定状态的元素，比如鼠标悬停、点击等。有一些常见的伪类选择器：

• :hover: 选择被鼠标悬停的元素。
• :active: 选择被鼠标点击且还没有释放的元素。
• :focus: 选择当前获得焦点的元素。
• :first-child: 选择作为其父元素的第一个子元素的元素。
• :last-child: 选择作为其父元素的最后一个子元素的元素。
• :nth-child(n): 选择作为其父元素的第n个子元素的元素。（n是一个整数）

/* 鼠标悬停时改变<a>元素的背景颜色 */
a:hover {
  background-color: orange;
}

/* 选择作为其父元素的第三个子元素的<div>元素 */
div:nth-child(3) {
  font-size: 20px;
}

2. 优先级与匹配原理

在HTML文档中，可能存在多个CSS规则同时作用于同一个元素。为了确定应该应用哪个规则，CSS使用优先级来决定。

2.1 优先级级别

CSS选择器的优先级按照以下级别从高到低进行排列：

1. 重要性（!important）
2. 内联样式（Inline Style）
3. ID选择器
4. 类选择器、属性选择器、伪类选择器
5. 元素选择器、伪元素选择器

通常情况下，具有更高级别的选择器会覆盖具有更低级别的选择器应用的样式。

2.2 优先级计算规则

在一个CSS规则中，可以通过以下规则来计算优先级：

• 每个ID选择器的级别为100，每个类选择器、属性选择器、伪类选择器的级别为10，每个元素选择器、伪元素选择器的级别为1。
• 将所有选择器的级别相加，得到总优先级。
• 如果存在重要性声明（!important），则总优先级为最高。
• 如果两个规则具有相同的总优先级，则根据出现的位置来决定应用哪个规则（后来的规则覆盖先前的规则）。

示例说明：

示例1：

HTML结构：

<div id="myDiv" class="myClass">
  <p>Hello World</p>
</div>

CSS样式：

#myDiv p {
  color: blue;
}

.myClass p {
  color: red;
}

在该示例中，#myDiv p选择器具有较高的优先级，所以段落文本颜色为蓝色。

示例2：

HTML结构：

<div class="myClass">
  <p class="myClass">Hello World</p>
</div>

CSS样式：

.myClass p {
  color: blue;
}

p.myClass {
  color: red;
}

在该示例中，.myClass p选择器和p.myClass选择器具有相同的总优先级。但是，p.myClass选择器出现在后面，所以段落文本颜色为红色。

以上就是关于CSS选择器种类、优先级与匹配原理的详细攻略。希望对你有所帮助！