1. 元素选择器:
- 选择所有特定类型的HTML元素。
p {
/* 样式规则 */
}
2. 类选择器:
- 选择带有特定类的元素。
.my-class {
/* 样式规则 */
}
3. ID选择器:
- 选择具有特定ID的元素。
#my-id {
/* 样式规则 */
}
4. 属性选择器:
- 选择具有特定属性或属性值的元素。
input[type="text"] {
/* 样式规则 */
}
5. 子元素选择器:
- 选择某个元素的直接子元素。
parent > child {
/* 样式规则 */
}
6. 伪类选择器:
- 选择元素的特定状态或位置。
a:hover {
/* 鼠标悬停时的样式 */
}
7. 伪元素选择器:
- 选择元素的特定部分。
p::first-line {
/* 选择段落的第一行 */
}
8. 通配符选择器:
- 选择所有元素。
* {
/* 样式规则应用于所有元素 */
}
9. 组合选择器:
- 将多个选择器组合在一起,以选择更特定的元素。
h1, h2, h3 {
/* 样式规则应用于 h1、h2 和 h3 元素 */
}
10. 邻接兄弟选择器:
- 选择同一父元素下紧接在另一个元素后的元素。
h2 + p {
/* 选择紧接在 h2 元素后的段落元素 */
}
这只是一小部分CSS选择器的示例。通过组合这些选择器,可以更精确地定位和样式化文档中的特定元素。需要根据具体的HTML结构和样式需求来选择合适的选择器。
转载请注明出处:http://www.zyzy.cn/article/detail/4083/CSS