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