Web前端-Web开发CSS基础2-选择器

一. 基础
1. 选中所有的<p>标签；
2. 选中所有的<ol>标签；
3. 选中所有的<ul>标签；
4. 选中所有id为happy的标签；
5. 选中所有id为sad的标签；
6. 选中所有id为angry的标签；
7. 选中所有类名为class1的标签；
8. 选中所有类名为class2的标签；
9. 选中所有类名为class3的标签；
10. 选中所有类名为class4的标签；
11. 选中所有类名为class5的标签；
12. 选中所有类名为class6的标签；
13. 选中所有的html元素；
14. 选中所有的html元素；
15. 选中所有的html元素；
16. 选中所有的class1类、class2类和class3类；
17. 选中所有的id为happy、id为sad和id为angry的类；
18. 选中所有的<p>标签、<h1>标签和<h2>标签；
19. 选中所有<article>标签下的所有<p>标签；
20. 选中所有<header>标签下的所有<p>标签；
21. 选中所有<footer>标签下的所有<p>标签；
22. 选中所有class1类下的所有p标签；
23. 选中所有class2类下的所有p标签；
24. 选中所有class3类下的所有p标签；
25. 选中所有id为happy下的所有p标签；
26. 选中所有id为sad下的所有p标签；
27. 选中所有id为angry下的所有p标签；
28. 选中所有<article>标签下的所有子级<p>标签；
29. 选中所有<header>标签下的所有子级<p>标签；
30. 选中所有<footer>标签下的所有子级<p>标签；
31. 选中所有class1类下的所有子级p标签；
32. 选中所有class2类下的所有子级p标签；
33. 选中所有class3类下的所有子级p标签；
34. 选中所有id为happy的标签下的所有子级p标签；
35. 选中所有id为sad的标签下的所有子级p标签；
36. 选中所有id为angry的标签下的所有子级p标签；
37. 选中所有紧跟在<article>标签后的一个<p>标签；
38. 选中所有紧跟在<header>标签后的一个<p>标签；
39. 选中所有紧跟在<footer>标签后的一个<p>标签；
40. 选中所有紧跟在class1类后的一个<p>标签；
41. 选中所有紧跟在class2类后的一个<p>标签；
42. 选中所有紧跟在class3类后的一个<p>标签；
43. 选中所有紧跟在id为happy的标签后的一个<p>标签；
44. 选中所有紧跟在id为sad的标签后的一个<p>标签；
45. 选中所有紧跟在id为angry的标签后的一个<p>标签；
46. 选中所有与<article>标签同级的<p>标签；
47. 选中所有与<header>标签同级的<p>标签；
48. 选中所有与<footer>标签同级的<p>标签；
49. 选中所有与class1类同级的p标签；
50. 选中所有与class2类同级的p标签；
51. 选中所有与class3类同级的p标签；
52. 选中所有与id为happy的标签同级的p标签；
53. 选中所有与id为sad的标签同级的p标签；
54. 选中所有与id为angry的标签同级的p标签；
55. 按顺序，选中所有未访问过的<a>标签、访问过的<a>标签、鼠标悬停时的<a>标签、按下不放时的<a>标签；
56. 按顺序，选中所有未访问过的<input>标签、访问过的<input>标签、鼠标悬停时的<input>标签、按下不放时的<input>标签；
57. 按顺序，选中所有未访问过的<button>标签、访问过的<button>标签、鼠标悬停时的<button>标签、按下不放时的<button>标签；
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；
59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；
60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
61. 选中所有<p>标签，并且这个<p>标签是其父标签中的第一个标签；
62. 选中所有<button>标签，并且这个<button>标签是其父标签中的第一个标签；
63. 选中所有<input>标签，并且这个<input>标签是其父标签中的第一个标签；
64. 选中所有类名为class1的标签，并且这个类名为class1的标签是其父标签中的第一个标签；
65. 选中所有id为angry的标签，并且这个id为angry的标签是其父标签中的第一个标签；
66. 选中所有id为happy的标签，并且这个id为happy的标签是其父标签中的第一个标签；
67. 选中所有<p>标签，并且这个<p>标签是其父标签<div>中的第一个标签；
68. 选中所有<button>标签，并且这个<button>标签是其父标签<div>中的第一个标签；
69. 选中所有<input>标签，并且这个<input>标签是其父标签<div>中的第一个标签；
70. 选中所有类名为class1的标签，并且这个类名为class1的标签是其父标签<div>中的第一个标签；
71. 选中所有id为angry的标签，并且这个id为angry的标签是其父标签<div>中的第一个标签；
72. 选中所有id为happy的标签，并且这个id为happy的标签是其父标签<div>中的第一个标签；
73. 选中所有<p>标签，并且这个<p>标签是其类名为class1的父标签中的第一个标签；
74. 选中所有<button>标签，并且这个<button>标签是其类名为class2的父标签中的第一个标签；
75. 选中所有<input>标签，并且这个<input>标签是其类名为class3的父标签中的第一个标签；
76. 选中所有类名为class1的标签，并且这个类名为class1的标签是其类名为class4的父标签中的第一个标签；
77. 选中所有id为angry的标签，并且这个id为angry的标签是其类名为class5的父标签中的第一个标签；
78. 选中所有id为happy的标签，并且这个id为happy的标签是其类名为class6的父标签中的第一个标签；
79. 选中所有<p>标签，并且这个<p>标签是其id为fff的父标签中的第一个标签；
80. 选中所有<button>标签，并且这个<button>标签是其id为fff的父标签中的第一个标签；
81. 选中所有<input>标签，并且这个<input>标签是其id为fff的父标签中的第一个标签；
82. 选中所有类名为class1的标签，并且这个类名为class1的标签是其id为fff的父标签中的第一个标签；
83. 选中所有id为angry的标签，并且这个id为angry的标签是其id为fff的父标签中的第一个标签；
84. 选中所有id为happy的标签，并且这个id为happy的标签是其id为fff的父标签中的第一个标签；
85. 选中<ul>标签下的第1个子标签；
86. 选中<ul>标签下的第2个子标签；
87. 选中<ul>标签下的第3个子标签；
88. 选中<ul>标签下的第1个子标签和第2个子标签；
89. 选中<ul>标签下的第1个子标签和第4个子标签；
90. 选中<ul>标签下的第3个子标签和第6个子标签；
91. 选中所有标签下，使用者选中的部分；
92. 选中所有标签下，使用者选中的部分；
93. 选中所有标签下，使用者选中的部分；
94. 在每个<p>标签之后，都插入图片../img/img1.png；
95. 在每个<p>标签之后，都插入图片../img/img2.png；
96. 在每个<p>标签之后，都插入图片../img/img3.png；
97. 在每个<p>标签之前，都插入图片../img/img1.png；
98. 在每个<p>标签之前，都插入图片../img/img2.png；
99. 在每个<p>标签之前，都插入图片../img/img3.png；

一. 基础
1. p{ ... }
2. ol{ ... }
3. ul{ ... }
4. #happy{ ... }
5. #sad{ ... }
6. #angry{ ... }
7. .class1{ ... }
8. .class2{ ... }
9. .class3{ ... }
10. .class4{ ... }
11. .class5{ ... }
12. .class6{ ... }
13. *{ ... }
14. *{ ... }
15. *{ ... }
16. .class1, .class2, .class3{ ... }
17. #happy, #sad, #angry{ ... }
18. p, h1, h2{ ... }
19. article p{ ... }
20. header p{ ... }
21. footer p{ ... }
22. .class1 p{ ... }
23. .class2 p{ ... }
24. .class3 p{ ... }
25. #happy p{ ... }
26. #sad p{ ... }
27. #angry p{ ... }
28. article > p{ ... }
29. header > p{ ... }
30. footer > p{ ... }
31. .class1 > p{ ... }
32. .class2 > p{ ... }
33. .class3 > p{ ... }
34. #happy > p{ ... }
35. #sad > p{ ... }
36. #angry > p{ ... }
37. article + p{ ... }
38. header + p{ ... }
39. footer + p{ ... }
40. .class1 + p{ ... }
41. .class2 + p{ ... }
42. .class3 + p{ ... }
43. #happy + p{ ... }
44. #sad + p{ ... }
45. #angry + p{ ... }
46. article ~ p{ ... }
47. header ~ p{ ... }
48. footer ~ p{ ... }
49. .class1 ~ p{ ... }
50. .class2 ~ p{ ... }
51. .class3 ~ p{ ... }
52. #happy ~ p{ ... }
53. #sad ~ p{ ... }
54. #angry ~ p{ ... }
55. a:link{ ... }    a:visited{ ... }    a:hover{ ... }    a:active{ ... }
56. input:link{ ... }    input:visited{ ... }    input:hover{ ... }    input:active{ ... }
57. button:link{ ... }    button:visited{ ... }    button:hover{ ... }    button:active{ ... }
58. .class1:link{ ... }    .class1:visited{ ... }    .class1:hover{ ... }    .class1:active{ ... }
59. #happy:link{ ... }    #happy:visited{ ... }    #happy:hover{ ... }    #happy:active{ ... }
60. #sad:link{ ... }    #sad:visited{ ... }    #sad:hover{ ... }    #sad:active{ ... }
61. p:first-child{ ... }
62. button:first-child{ ... }
63. input:first-child{ ... }
64. .class1:first-child{ ... }
65. #angry:first-child{ ... }
66. #happy:first-child{ ... }
67. div p:first-child{ ... }
68. div button:first-child{ ... }
69. div input:first-child{ ... }
70. div .class1:first-child{ ... }
71. div #angry:first-child{ ... }
72. div #happy:first-child{ ... }
73. .class1 p:first-child{ ... }
74. .class2 button:first-child{ ... }
75. .class3 input:first-child{ ... }
76. .class4 .class1:first-child{ ... }
77. .class5 #angry:first-child{ ... }
78. .class6 #happy:first-child{ ... }
79. #fff p:first-child{ ... }
80. #fff button:first-child{ ... }
81. #fff input:first-child{ ... }
82. #fff .class1:first-child{ ... }
83. #fff #angry:first-child{ ... }
84. #fff #happy:first-child{ ... }
85. ul > li:nth-child(1){ ... }
86. ul > li:nth-child(2){ ... }
87. ul > li:nth-child(3){ ... }
88. ul > li:nth-child(1), ul > li:nth-child(2){ ... }
89. ul > li:nth-child(1), ul > li:nth-child(4){ ... }
90. ul > li:nth-child(3), ul > li:nth-child(6){ ... }
91. ::selection{ ... }
92. ::selection{ ... }
93. ::selection{ ... }
94. p::after{ content: url(../img/img1.png); }
95. p::after{ content: url(../img/img2.png); }
96. p::after{ content: url(../img/img3.png); }
97. p::before{ content: url(../img/img1.png); }
98. p::before{ content: url(../img/img2.png); }
99. p::before{ content: url(../img/img3.png); }