css 选择符介绍

最新推荐文章于 2025-03-18 00:30:00 发布

原创最新推荐文章于 2025-03-18 00:30:00 发布

· 4k 阅读

版权

文章标签：

16 篇文章

订阅专栏

本文介绍了CSS选择符的不同类别，包括类型选择符、类选择符、ID选择符、通配选择符、通用兄弟选择符、分组选择符、伪类和伪元素等，详细阐述了它们的语法和用途，帮助读者理解和运用CSS选择符来实现更精细的样式控制。

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

css选择符分为很多类，包括：类型选择符，class选择符，id选择符，通用选择符，分组选择符，包含选择符，元素指定选择符，子对象选择符，属性选择符，下面我们来一一讲解

1.类型选择符
类型选择符是指以文档对象模型（DOM）作为选择符，即选择某个HTML标签为对象，设置其样式规则。类型选择符就是元素本身，定义直接使用元素名称

格式：
body{css代码}

2.类选择符
使用类选择符可以吧相同的标签定义为不同的样式。吐过你希望同一种标签在不同的地方使用不同的样式，就可以先定义两个类在应用时只要在标签中指定它的属于哪一个类，就可以使用该类样式。我们可以将不同的元素设置相同的类名，就哭将不同的元素设置为相同的样式

格式

<html>
<style>
	.类名{属性名:属性值}
</style>
<body>
	<p class='类名'>...</p>
</body>
</html>

3.id选择符
id选择符用于对某个单一元素设置单独样式，定义id选择符时要在id名称前加上一个‘#’号。

<html>
<style>
	#id名{属性名:属性值}
</style>
<body>
	<p id='id名'>...</p>
</body>
</html>

其中‘#id名’是定义的id选择符名称，该选择符名称在文档中是唯一的只读页面中的唯一元素进行样式定义。这样的样式定义在页面中只能出现一次，其使用范围为整个html文档中所有引用id

4.通配选择符
通配选择符是一种特殊的选择符，其作用是定义页面所有元素的样式，在编码是用 ‘*’ 代表通配选择符
格式：
*{css代码}

5.通用兄弟选择符E~F
通用兄弟选择符 E~F 用来指定位于同一个元素之中的某个元素之间的所有其他某个种类的兄弟元素所使用是样式
格式：
E~F：{att}
其中E,F表示元素，att表示元素的属性。通用兄弟元素选择符E~F表示匹配E元素之后的F元素。

6.分组选择符
分组选择符指的是对多个变迁设置同意样的样式，在不同的类型中，表示同一样的样式
格式：
E1,E2,E3{CSS代码}
当多个对象定义了相同的样式时，用户可以吧他们分为一组这样能够简化代码读写

.class{css代码}
.calss2{css代码}
可以分组为
.class,class2{css代码}

7.伪类选择符
下面讲解一些特殊的选择符
伪类可以让用户在使用页面的过程中增加更多的交互效果，具体代码实例如下：

a:link{css代码}/*未访问的链接状态*/
a:visited{css代码}/*已访问的链接状态*/
a:hover{css代码}/*鼠标移入的链接状态*/
a:active{css代码}/*被激活的链接状态*/

8.伪元素
与伪类的方式相似，伪元素通过对插入到文档中的虚构元素进行触发，从而达到某种效果，伪元素格式为：

选择符:伪元素{属性:属性值;}