CSS 选择器和样式优先级的秘诀，助你轻松掌握网页样式

CSS选择器：选择你想要的

CSS 选择器是用来指定网页上我们想要样式化的 HTML 元素。选择器可以很简单，比如用元素的名称来选择，也可以很复杂，比如用元素的属性、位置或关系来选择。

CSS 中提供了很多种类的选择器，本文将简单介绍一下目前存在的所有类型的选择器。

1. 元素选择器

元素选择器是最简单的选择器，它用元素的名称来选择元素。例如，要选择页面上的所有 <p> 元素，可以使用以下选择器：

p {
  color: red;
}

2. 类选择器

类选择器用元素的 class 属性来选择元素。例如，要选择页面上所有具有 "red" 类的元素，可以使用以下选择器：

.red {
  color: red;
}

3. ID 选择器

ID 选择器用元素的 id 属性来选择元素。例如，要选择页面上具有 "header" ID 的元素，可以使用以下选择器：

#header {
  color: blue;
}

4. 通用选择器

通用选择器匹配页面上的任何元素。例如，要选择页面上的所有元素，可以使用以下选择器：

* {
  color: black;
}

5. 相邻选择器

相邻选择器选择紧挨着另一个元素的元素。例如，要选择所有紧挨着 <p> 元素的 <span> 元素，可以使用以下选择器：

p + span {
  color: green;
}

6. 子元素选择器

子元素选择器选择作为另一个元素的子元素的元素。例如，要选择所有作为 <ul> 元素的子元素的 <li> 元素，可以使用以下选择器：

ul > li {
  color: orange;
}

7. 后代选择器

后代选择器选择一个元素的后代元素。例如，要选择所有作为 <ul> 元素的后代元素的 <li> 元素，可以使用以下选择器：

ul li {
  color: purple;
}

CSS 样式优先级：让样式生效

CSS 样式优先级决定了当多个样式规则应用于同一个元素时，哪个样式规则生效。样式优先级由以下因素决定：

1. 来源

来源是指样式规则的来源。内联样式的优先级最高，其次是嵌入样式，最后是外部样式。

2. 特殊性

特殊性是指样式规则中选择器的特殊性。特殊性由以下因素决定：

• 元素名称：元素名称越具体，特殊性越高。
• 类选择器和 ID 选择器：类选择器和 ID 选择器的特殊性比元素名称高。
• 通用选择器：通用选择器的特殊性最低。

3. 顺序

顺序是指样式规则在样式表中的顺序。后面的样式规则的优先级高于前面的样式规则。

举个例子

为了更好地理解 CSS 选择器和样式优先级，我们来看一个例子。

假设我们有一个 <div> 元素，它的类是 "red"，它的 ID 是 "header"。我们还有以下样式规则：

/* 外部样式表 */
.red {
  color: red;
}

/* 嵌入样式 */
#header {
  color: blue;
}

/* 内联样式 */
<div id="header" class="red" style="color: green;">Hello World!</div>

在这个例子中，内联样式的优先级最高，所以 <div> 元素的文本颜色是绿色。嵌入样式的优先级次之，所以 <div> 元素的 ID 是 "header"。外部样式的优先级最低，所以 <div> 元素的类是 "red"。

结论

CSS 选择器和样式优先级是 Web 开发中两个非常重要的概念。掌握了这些知识，你将能够创建出更具吸引力和一致性的网页。