CSS选择器详解-CSDN博客

1 需求

CSS选择器

*
tag
class
id
派生选择器

2 语法

3 示例

<!DOCTYPE>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>CSS选择器</title>
	</head>
	<style>
		/* CSS选择一：通配符 */
		* {
			color: green;
		}

		/* CSS选择器二：标签 */
		h1 {
			color: red;
		}

		/* CSS选择器三：类 */
		.classDemo {
			color: yellow;
		}

		/* CSS选择器四：ID */
		#idDemo {
			color: blue;
		}
	</style>
	<body>
		<h1>一级标题</h1>
		<h2 class="classDemo">二级标题</h2>
		<h3 id="idDemo">三级标题</h3>
		您好
	</body>
</html>
</!DOCTYPE>

4 参考资料

CSS 选择器 | 菜鸟教程

CSS的选择器（超详细！！）_鼓瑟楼的博客-CSDN博客_css选择器

CSS 提供了多种选择器，用于选择要应用样式的 HTML 元素。

以下是一些常见的 CSS 选择器：

元素选择器（Element Selector）：通过元素名称选择 HTML 元素。例如，p 选择器将选择所有 <p> 元素。

类选择器（Class Selector）：通过类别名称选择具有特定类别的 HTML 元素。类选择器以 . 开头，后面跟着类别名称。例如，.highlight 选择器将选择所有具有类别为 "highlight" 的元素。

ID 选择器（ID Selector）：通过元素的唯一标识符（ID）选择 HTML 元素。ID 选择器以 # 开头，后面跟着 ID 名称。例如，#logo 选择器将选择具有 ID 为 "logo" 的元素。

属性选择器（Attribute Selector）：通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。例如，input[type="text"] 选择器将选择所有 type 属性为 "text" 的 <input> 元素。

后代选择器（Descendant Selector）：通过指定元素的后代关系选择 HTML 元素。后代选择器使用空格分隔元素名称。例如，div p 选择器将选择所有在 <div> 元素内的 <p> 元素。

子元素选择器（Child Selector）：通过指定元素的直接子元素关系选择 HTML 元素。子元素选择器使用 > 符号分隔父元素和子元素。例如，ul > li 选择器将选择所有 <ul> 元素的直接子元素中的 <li> 元素。

相邻兄弟选择器（Adjacent Sibling Selector）：通过指定元素之间的相邻兄弟关系选择 HTML 元素。相邻兄弟选择器使用 + 符号分隔两个相邻元素。例如，h2 + p 选择器将选择紧接在 <h2> 元素后的 <p> 元素。

通用选择器（Universal Selector）：选择所有 HTML 元素。通用选择器使用 * 符号。例如，* 选择器将选择页面上的所有元素。

除了上述常见的选择器，还有伪类选择器（Pseudo-Class Selector）和伪元素选择器（Pseudo-Element Selector），用于选择元素的特定状态或位置。

这只是一小部分 CSS 选择器的示例，CSS 还提供了更多的选择器和组合方式，使开发者可以更精确地选择和应用样式于 HTML 元素。开发者可以根据需要选择适当的选择器来实现所需的样式效果。