【基础知识01】CSS3选择器总结

程序员微木

已于 2024-06-09 14:55:18 修改

阅读量99

点赞数

分类专栏： HTML+CSS3 文章标签： css3 css html

于 2022-10-02 18:33:10 首次发布

本文链接：https://blog.csdn.net/qq_67896626/article/details/127034915

版权

HTML+CSS3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、CSS3基础选择器

1、标记选择器

（1）用HTML的标记名作为选择器

<style>
标记名{属性1：属性值1；属性2：属性值2；}
</style>

2、类选择器

（1）格式：类选择器用‘.’（英文点号），后面紧跟类名（类名为HTML元素的class属性值）

3、id选择器

（1）格式：用‘#’进行标识，后边紧跟id名

4、后代选择器

（1）用途：用来选择元素或元素组的后代

（2）格式：

每个标记名用空格进行分割，最后一个标记名为作用的对象。

标签名1 标签名2 标签名3 {
}

5、并集选择器

（1）用途：用于为多个结构元素设置同样样式的选择器

（2）格式：每个标签名逗号进行隔开

标签名1，标签名2，标签名3{}

（3）注意：并集选择器中可以是任何形式的选择器（包括标记选择器、类选择器、id选择器等），其都可以作为并集选择器的一种。

6、标签指定式选择器

（1）格式：又称为交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为类选择器或id选择器

（2）用途：用来指定HTML中需要作用的样式。

7、通配符选择器

（1）说明用“*”号表示，能够匹配页面中所有的元素。

二、属性选择器

匹配哪些具有特定属性或属性值的元素

总体说明：（E标记可以省略，若省略就选择匹配满足条件的任意一个元素）

1、E[att^=value]

（1）用法说明：

用于选择E标签，且E标签中定义了att属性，选择属性值以value开头元素

2、E[att$=value]

（1）用法说明：

选择名称为E的标记，且该标记定义了att属性（eg：类选择器、id选择器等）用于选择包涵后缀为value的子字符串。

3、E[att*=value]

（1）用法说明：

选择att属性值至少包含一个value值的元素。

4、E[att = value]

(1)用法说明：

用于选择E标签中，具有att属性名，且属性值位value的元素

三、结构化伪类选择器

1、:root选择器

（1）用于匹配文档根元素，对所有页面元素都起作用。类似于通配符选择器。

（2）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			:root{
				color: red;
			}
		</style>
	</head>
	<body>
		<h2>面朝大海，春暖花开</h2>
		<p>
			从明天起，做个幸福的人
			喂马，劈柴周游世界
		</p>
	</body>
</html>