CSS的使用——常用选择器的用法

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;
}