IT课程 CSS基础 020_选择器

选择器

选择器用于选择文档中需要样式化的元素，通过不同的选择模式，告诉浏览器哪些元素应用哪些样式。

ID选择器（#）

通过元素的唯一ID来选择元素。ID选择器应该确保在文档中是唯一的，不应重复使用相同的ID。

示例：

#myID {
	/* 样式规则 */
}

类选择器（.）

通过元素的类名选择元素。类选择器可以用于多个元素，同一个元素可以拥有多个类。

示例：

.myClass {
	/* 样式规则 */
}

元素选择器（p、h1）

通过HTML元素的名称选择元素。元素选择器会选择文档中所有匹配的元素。

示例：

p {
	/* 样式规则 */
}

通用选择器（*）

选择文档中的所有元素。通用选择器应该谨慎使用，因为会匹配所有元素，影响性能。

示例：

* {
	/* 样式规则 */
}

属性选择器（[type="text"]）

通过元素的属性值选择元素。属性选择器可以根据属性值的不同选择元素。

示例：

input[type="text"] {
	/* 样式规则 */
}

伪类选择器

选择元素的特殊状态或位置。伪类选择器用于选择元素的交互状态，如悬停、访问等。

示例：

a:hover {
	/* 样式规则 */
}

伪元素选择器

选择元素的特殊部分。伪元素选择器用于选择元素的虚拟部分，如首行、首字母等。

示例：

p::first-line {
	/* 样式规则 */ 
}

子元素选择器

选择某个元素的直接子元素。子元素选择器只选择直接子元素，不包括后代。

示例：

ul > li {
	/* 样式规则 */
}

通用兄弟选择器

选择和指定元素有相同父元素的所有兄弟元素。通用兄弟选择器用于选择所有在指定元素后面的兄弟元素，不要求紧邻。

示例：

h2 ~ p {
	/* 样式规则 */
}

相邻兄弟选择器

选择紧接在指定元素后面的兄弟元素。相邻兄弟选择器用于选择紧接在指定元素后面的兄弟元素。

示例：

h2 + p {
	/* 样式规则 */
}

后代选择器

选择某个元素下的所有后代元素。后代选择器会选择指定元素下的所有后代，包括嵌套层次深的元素。

示例：

div p {
	/* 样式规则 */
}

并集选择器（,）

将多个选择器组合在一起，选择所有匹配任一选择器的元素。并集选择器用于同时选择多个不同类型的元素，并应用相同的样式规则。

示例：

h1, h2, h3 {
	/* 样式规则 */
}

选择器列表

将多个选择器按照优先级顺序列举，选择最匹配的一个。选择器列表允许按照不同的选择器组合选择多个元素，以满足不同条件的样式需求。

示例：

div p,
.myClass,
#myID {
	/* 样式规则 */
}

选择器命名规则

• 选择器的名称必须是字母数字、下划线或连字符组成的字符串。
• 选择器的名称必须以字母或下划线开头。
• 选择器的名称不能以数字开头。
• 选择器的名称不能包含空格。 建议：
• 使用有意义的名字： 选择器的名字应该能够清晰地反映出所选择元素的作用或用途。
• 遵循命名约定： 使用一致的命名约定，如驼峰式命名或短横线连接命名，以提高代码的一致性。
• 避免使用无意义的缩写： 避免使用过于简短或无意义的缩写，使得其他开发者也能理解选择器的含义。
• 遵循语义化： 使用具有语义化的选择器，以提高代码的可读性和维护性。