选择器用于选择文档中需要样式化的元素,通过不同的选择模式,告诉浏览器哪些元素应用哪些样式。
通过元素的唯一ID来选择元素。ID选择器应该确保在文档中是唯一的,不应重复使用相同的ID。
示例:
#myID {
/* 样式规则 */
}
通过元素的类名选择元素。类选择器可以用于多个元素,同一个元素可以拥有多个类。
示例:
.myClass {
/* 样式规则 */
}
通过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 {
/* 样式规则 */
}