CSS选择器和优先级-编程入门课：CSS(3)从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：CSS(3)从入门到实战

CSS选择器和优先级是CSS样式表中非常重要的两个概念。选择器用于选择页面中的元素，而优先级则用于确定当多个规则应用于同一个元素时哪个规则将优先生效。在本文中，我们将结合代码示例来详细讲解CSS选择器和优先级的相关内容。

CSS选择器
CSS选择器是一种用于选择特定元素的模式。它可以通过元素类型、类名、ID、属性、伪类等方式来匹配特定的元素。以下是一些常用的CSS选择器：

元素选择器
元素选择器是通过元素的名称来选择元素的。例如，p选择器会选择所有的<p>元素。示例代码如下：
```asp
p {
  color: red;
}

```
上面的代码会将页面中所有的<p>元素的文字颜色设置为红色。

类选择器
类选择器是通过元素的class属性来选择元素的。例如，.intro选择器会选择所有class属性为intro的元素。示例代码如下：
```asp
.intro {
  font-weight: bold;
}

```
上面的代码会将所有class属性为intro的元素的文字加粗。

ID选择器
ID选择器是通过元素的id属性来选择元素的。例如，#header选择器会选择id属性为header的元素。示例代码如下：
```asp
#header {
  background-color: gray;
}

```
上面的代码会将id属性为header的元素的背景颜色设置为灰色。

属性选择器
属性选择器是通过元素的属性来选择元素的。例如，`[href]`选择器会选择所有包含href属性的元素。示例代码如下：
```asp
a[href] {
  color: blue;
}

```
上面的代码会将所有包含href属性的`<a>`元素的文字颜色设置为蓝色。

伪类选择器
伪类选择器是用于匹配元素的特定状态或位置的选择器。例如，:hover伪类选择器会选择鼠标悬停在元素上的元素。示例代码如下：
```asp
a:hover {
  text-decoration: underline;
}

```
上面的代码会将鼠标悬停在`<a>`元素上时，其下划线样式设置为实线。

CSS优先级
当多个CSS规则应用于同一个元素时，可能会发生优先级冲突。这时，浏览器需要确定哪个规则应该优先生效。CSS优先级用于确定规则的优先级顺序，其由以下四个部分构成：

行内样式优先级最高
ID选择器的优先级高于类选择器和元素选择器
元素选择器的优先级高于类
当两个规则的选择器都相同时，后面的规则会覆盖前面的规则
以下是一些常见的优先级示例：

行内样式优先级最高
行内样式是直接写在HTML元素的style属性中的样式，其优先级最高。例如，下面的代码中，`<p>`元素的文字颜色被设置为红色：
```asp
<p style="color: red;">Hello World!</p>

```
ID选择器的优先级高于类选择器和元素选择器
由于ID选择器的具体性更高，因此其优先级高于类选择器和元素选择器。例如，下面的代码中，#header选择器会覆盖.header选择器和p选择器，因为它具有更高的优先级：
```asp
#header {
  font-weight: bold;
}

.header {
  font-style: italic;
}

p {
  color: red;
}

```
元素选择器的优先级高于类选择器
虽然ID选择器的优先级高于类选择器，但元素选择器的优先级却要高于类选择器。例如，下面的代码中，p选择器会覆盖.intro选择器，因为它具有更高的优先级：
```asp
p {
  color: red;
}

.intro {
  color: blue;
}

```
后面的规则会覆盖前面的规则
当两个规则的选择器都相同时，后面的规则会覆盖前面的规则。例如，下面的代码中，最后的.intro选择器会覆盖前面的.intro选择器，因为它出现的位置更靠后：
```asp
.intro {
  color: blue;
}

.intro {
  color: red;
}

```
示例代码
以下是一个结合了CSS选择器和优先级的示例代码。在该代码中，我们使用了多种不同类型的选择器，包括元素选择器、类选择器、ID选择器和伪类选择器。同时，我们也演示了不同选择器之间的优先级关系：
```asp
<!DOCTYPE html>
<html>
<head>
	<title>CSS选择器和优先级示例</title>
	<style>
		/* ID选择器的优先级最高 */
		#header {
			background-color: gray;
			height: 80px;
			line-height: 80px;
			text-align: center;
			color: white;
			font-size: 30px;
			font-weight: bold;
		}

/* 类选择器的优先级次于ID选择器 */
		.intro {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 20px;
		}

/* 元素选择器的优先级次于类选择器 */
		p {
			line-height: 1.5em;
			margin-bottom: 10px;
		}

/* 伪类选择器的优先级与类选择器相同 */
		a:hover {
			text-decoration: underline;
		}
	</style>
<body>
	<header id="header">这是网站的标题</header>
	<div class="container">
		<div class="intro">欢迎来到我的网站！</div>
		<p>这是一个段落。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies nunc sit amet elit pretium, vel cursus augue mattis.</p>
		<p>这是另一个段落。Nullam sit amet enim risus. Integer nec sapien lobortis, facilisis turpis a, laoreet metus.</p>
		<a href="#">点击这里</a>查看更多信息。
	</div>
</body>
</html>

```
在上面的代码中，我们使用了#header选择器来设置网站的标题样式，使用.intro选择器来设置欢迎语句的样式，使用p选择器来设置段落的样式，使用a:hover选择器来设置链接的鼠标悬停样式。同时，我们也演示了选择器之间的优先级关系，例如#header选择器的优先级最高，p选择器的优先级高于.intro选择器，等等。

小结：
CSS选择器和优先级是CSS语言中非常重要的概念。了解这些概念可以帮助我们更好地掌握CSS的使用，从而能够更加灵活地控制HTML文档的样式。

该分类下的相关小册推荐：

编程入门课：HTML(5)从入门到实战