常用CSS的选择器有哪些？

原文链接：https://note.noxussj.top/?source=helloworld

选择器定义

css 选择器代表如何选中某个元素

现实生活举例 我们可以想象一个元素，其实就是一个人，那我该如何找到这个人呢？例如可以通过 id 选择器的方式，就像是通过身份证号码找到 TA。也可以通过标签选择器找到 TA，就像是通过喊 TA 的名字的方式。

类选择器

1.my-content {
2    color: #f00;
3}

id 选择器

1#my-content {
2    color: #f00;
3}

标签选择器

1div {
2    color: #f00;
3}

属性选择器

1div[name='myName'] {
2    color: #f00;
3}

后代选择器

1.my-content .box1 {
2    color: #f00;
3}

子代选择器

1.my-content > .box1 {
2    color: #f00;
3}

相邻选择器

1.my-content + .my-content2 {
2    color: #f00;
3}

兄弟选择器

1.my-content ~ .my-content2 {
2    color: #f00;
3}

伪类选择器

1/* 鼠标移入 */
2.my-content:hover {
3    color: #f00;
4}
5
6/* 鼠标按下 */
7.my-content:active {
8    color: #00f;
9}
10
11/* 元素禁用 */
12.my-content:disabled {
13    color: #888;
14}
15
16/* 在父元素中匹配第一个子元素 my-content */
17.my-content:first-child {
18    color: #f00;
19}
20
21/* 在父元素中匹配最后一个子元素 my-content */
22.my-content:last-child {
23    color: #f00;
24}
25
26/* 在父元素中匹配第n个子元素 my-content */
27.my-content:nth-child(2) {
28    color: #f00;
29}
30
31/* 在父元素中匹配倒数第n个子元素 my-content */
32.my-content:nth-last-child(2) {
33    color: #f00;
34}

伪元素选择器

1/* 元素前面插入 */
2.my-content::before {
3    content: 'name1';
4    color: #f00;
5}
6
7/* 元素后面插入 */
8.my-content::after {
9    content: 'name2';
10    color: #00f;
11}