css选择器（常用）

最新推荐文章于 2023-03-31 12:27:42 发布

原创最新推荐文章于 2023-03-31 12:27:42 发布 · 388 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #HTML

HTML 专栏收录该内容

7 篇文章

订阅专栏

本文主要介绍了CSS选择器相关知识。包括标签、类、id、后代、分组、通配符选择器的语法及使用注意事项，还说明了选择器优先级为id选择器>类选择器>标签选择器，以及!important可提高样式优先权，最后介绍了CSS伪类的语法和使用顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css选择器

浏览器通过选择器为满足条件的HTML元素添加CSS样式。

1.标签选择器

标签选择器：浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式，其语法如下：
标签选择器名 {
	declaration1;
	declaration2;
    …
}
代码如下：

浏览器会为HTML文档内所有p标签元素添加“font-size: 36px;font-weight: bold;”CSS样式。显示效果：

2.类选择器

浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式，其语法如下：
.类选择器名 {
	declaration1;
	declaration2;
    …
}
注意：类选择器前面是用点号（ . ）标识

class标签属性的属性值不能以数字开头；

class标签属性的属性值可以有多个，每个值之间用空格间隔；

代码如下：

显示效果：

3. id选择器

浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式，其语法如下：
# id选择器名 {
	declaration1;
	declaration2;
    	…
}
注意：id选择器前面是用井号（ # ）标识

id标签属性的属性值不能以数字开头；

id标签属性的属性值在HTML文档中必须唯一；class标签属性的属性值可以不唯一；

代码如下：

显示效果：

4.后代选择器

后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式，语法如下：
父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
	declaration1;
	declaration2;
    	…
}
注意：选择器之间用空格间隔；

只为ol标签元素内class="font_color"的子元素添加CSS样式。代码如下-->显示结果如下：

5.分组选择器

如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码，该选择器的选择器名由多个选择器组成，使用逗号分隔，其语法如下：
选择器1,选择器2,选择器3…{
	declaration1;
	declaration2;
    …
}
代码如下-->显示结果如下：

6.通配符选择器

通配符选择器匹配HTML文档中的任何HTML元素，其语法如下：
*{
	declaration1;
	declaration2;
    	…
}
注意：通配符选择器前面是用乘号（ * ）标识

代码如下-->显示结果如下：

选择器优先级

常用的选择器之间是存在优先级别的：id选择器优先级最高，然后是类选择器，标签选择器优先级最低，如下所示：

id选择器 > 类选择器 > 标签选择器

代码如下-->显示结果如下：

!important 用于提高指定样式规则的应用优先权

代码如下-->显示结果如下：

CSS伪类

CSS 伪类用于向某些选择器添加特殊的效果，语法结构如下：
选择器:伪类 {
	declaration1;
	declaration2;
    	…
}
属性的值：

注意：若:link、:visited、:hover和:active一起使用，:hover 必须被置于 :link 和 :visited 之后，:active 必须被置于 :hover 之后，即:link -> :visited -> :hover -> :active ，简记love hate（爱恨）。

代码如下：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		#sina{
			color: #333;
			text-decoration: none;
			font-family: "PingFang SC","Microsoft YaHei",arial,"Hiragino Sans GB","Hiragino Sans GB W3";
		}
		#sina:link{
			text-decoration: underline;
			color: green;
		}
		#sina:visited{
			color: coral;
		}
		#sina:hover{
			color:slateblue ;
		}
		#sina:active{
			color:red ;
		}
	</style>
	<body>
		<a id="sina" href="http://www.sina.com">新浪</a>
	</body>
</html>
效果显示：

----->----->----->