CSS 选择器知识点总结
warning:
这篇文章距离上次修改已过297天,其中的内容可能已经有所变动。
CSS 选择器是用来选择你想要样式化的元素的模式。下面是一些常见的 CSS 选择器:
- 类选择器(Class Selector): 用于选择具有指定类的元素。
.my-class {
color: red;
}
- ID 选择器(ID Selector): 用于选择具有指定 ID 的单个元素。
#my-id {
color: blue;
}
- 元素选择器(Element Selector): 用于选择指定类型的元素。
p {
font-size: 16px;
}
- 属性选择器(Attribute Selector): 用于选择包含指定属性的元素。
input[type="text"] {
background-color: yellow;
}
- 伪类选择器(Pseudo-class Selector): 用于选择处于特定状态的元素。
a:hover {
text-decoration: underline;
}
- 伪元素选择器(Pseudo-element Selector): 用于选择元素的一部分(如第一个字母或元素内容的开始/结束)。
p::first-letter {
font-size: 200%;
}
- 子代选择器(Child Selector): 用于选择指定父元素的直接子元素。
div > p {
color: green;
}
- 相邻选择器(Adjacent Sibling Selector): 用于选择紧跟在另一个元素后的元素。
h1 + p {
margin-top: 0;
}
- 后代选择器(Descendant Selector): 用于选择指定父元素的后代(不仅限于直接子元素)。
div p {
color: purple;
}
- 通配选择器(Universal Selector): 选择页面上的所有元素。
* {
margin: 0;
padding: 0;
}
- 群组选择器(Grouping Selector): 将选择器组合在一起,选择匹配任一选择器的元素。
h1, h2, h3 {
font-family: Arial, sans-serif;
}
这些是 CSS 选择器的基础知识。CSS 还有更高级的选择器,如伪元素选择器、标签选择器、伪类函数选择器等。
评论已关闭