CSS选择器用于选择要样式化的HTML元素。下面介绍常见的CSS选择器用法。
1. 通配选择器
* {
margin: 0;
padding: 0;
}
2. 元素选择器
h1 {
color: blue;
}
3. 类选择器
.my-class {
font-size: 16px;
}
4. ID选择器
#my-id {
background-color: lightgray;
}
5. 交集选择器
交集选择器是并且的意思
div p {
font-style: italic;
}
6. 并集选择器
并集选择器是各个选择器通过逗号连接而成的
h2, h3 {
color: green;
}
7. 后代选择器
后代选择器会选择指定元素的所有后代元素，无论它们位于多少层级内。
div p {
color: red;
}
这段代码会选择所有在
元素内的元素，并将它们的文字颜色设置为红色。
8. 子代选择器
子代选择器只会选择指定元素的直接子元素。
ul > li {
list-style-type: square;
}
这段代码会选择所有直接在
- 元素内的
- 元素，并将它们的列表样式设置为方块。
9. 兄弟选择器
兄弟选择器会选择与指定元素拥有相同父元素的元素。
h2 + p {
font-weight: bold;
}
这段代码会选择紧接在
元素后的
元素，并将它们的字体加粗。
10. 属性选择器
属性选择器允许根据元素的属性值来选择元素。
input[type="text"] {
border: 1px solid black;
}
这段代码会选择所有 type 属性值为"text"的 元素，并将它们的边框设为黑色实线。
11. :hover
伪类选择器 - 当用户鼠标悬停在元素上时应用样式
a:hover {
color: red;
}
12. :active
伪类选择器 - 当元素被激活（例如被点击）时应用样式
button:active {
background-color: yellow;
}
13. :visited
伪类选择器 - 选择已访问过的链接
a:visited {
color: purple;
}
14. :focus
伪类选择器 - 当元素获得焦点时应用样式
input:focus {
border: 2px solid blue;
}
15. :nth-child()
伪类选择器 - 选择元素在其父元素中特定位置的子元素
ul li:nth-child(odd) {
background-color: lightgray;
}
16. :first-child
伪类选择器 - 选择父元素中的第一个子元素
ul li:first-child {
font-weight: bold;
}
17. :last-child
伪类选择器 - 选择父元素中的最后一个子元素
ul li:last-child {
color: green;
}
18. ::before
伪元素选择器 - 在元素内容之前插入生成的内容
p::before {
content: "开始：";
font-weight: bold;
}
19. ::after
伪元素选择器 - 在元素内容之后插入生成的内容
p::after {
content: "结束。";
font-style: italic;
}
20. ::first-line
伪元素选择器 - 选择元素的第一行文本
p::first-line {
text-transform: uppercase;
}
21. ::first-letter
伪元素选择器 - 选择元素的第一个字母
p::first-letter {
font-size: 150%;
color: red;
}