博客列表 >CSS选择器基础知识和实例

CSS选择器基础知识和实例

赵大叔
赵大叔原创
2020年04月08日 00:06:51713浏览

CSS选择器基础知识

代码演示效果链接:

简单选择器

上下文选择器

伪类选择器-不分组匹配

伪类选择器-分组匹配

其它伪类选择器

1. 简单选择器

简单选择器优先级:标签 < class属性 < id属性

序号 选择器 描述 举例
1 元素选择器 根据元素标签名称进行匹配 div {...}
2 群组选择器 同时选择多个不同类型的元素 h1,h2,h3{...}
3 通配选择器 选择全部元素,不区分类型 * {...}
4 属性选择器 根据元素属性进行匹配 *[...]
5 类选择器 根据元素 class 属性进行匹配 *.active {...}
6 id 选择器 根据元素 id 属性进行匹配 *#top {...}
  • 元素是使用标签和属性进行描述,所以使用标签和属性来选择元素非常自然和直观
  • 以上 6 种,其实可分为二类: 元素选择器和属性选择器, 其它的只是二者的特例罢了
  • 当 class,id 选择器不限定被修改的元素类型时, 星号”*“可以省略

2. 上下文选择器

序号 选择器 操作符 描述 举例
1 后代选择器 空格 选择当前元素的所有后代元素 div p, body *
2 父子选择器 > 选择当前元素的所有子元素 div > h2
3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li
4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ li

3. 伪类选择器

3.1 不分组匹配

序号 选择器 描述 举例
1 :first-child 匹配第一个子元素 div :first-child
2 :last-child 匹配最后一个子元素 div :last-child
3 :only-child 选择元素的唯一子元素 div :only-child
4 :nth-child(n) 匹配任意位置的子元素 div :nth-child(n)
5 :nth-last-child(n) 匹配倒数任意位置的子元素 div :nth-last-child(n)

3.2 分组匹配

序号 选择器 描述 举例
1 :first-of-type 匹配按类型分组后的第一个子元素 div :first-of-type
2 :last-of-type 匹配按类型分组后的最后一个子元素 div :last-of-type
3 :only-of-type 匹配按类型分组后的唯一子元素 div :only-of-type
4 :nth-of-type() 匹配按类型分组后的任意位置的子元素 div :nth-of-type(n)
5 :nth-last-of-type() 匹配按类型分组后倒数任意位置的子元素 div :nth-last-of-type(n)

3.3 其它伪类

序号 选择器 描述
1 :active 向被激活的元素添加样式
2 :focus 向拥有键盘输入焦点的元素添加样式
3 :hover 当鼠标悬浮在元素上方时,向元素添加样式
4 :link 向未被访问的链接添加样式
5 :visited 向已被访问的链接添加样式
5 :root 根元素,通常是html
5 :empty 选择没有任何子元素的元素(含文本节点)
5 :not() 排除与选择器参数匹配的元素

CSS选择器应用实例

  1. <!--简单选择器-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>简单选择器</title>
  7. <style>
  8. /* 元素选择器:根据元素标签名选择 */
  9. h2 {
  10. color: hotpink;
  11. }
  12. /*群组选择器:同时选择多个,用逗号隔开*/
  13. h2, ul {
  14. background-color: grey;
  15. }
  16. /*通配选择器,选择全部元素*/
  17. * {
  18. width: 400px;
  19. }
  20. /* 属性选择器: 元素属性--class, id, title... */
  21. [title="one"] {
  22. color: #55a532;
  23. }
  24. /*类选择器:按照元素的class属性选择*/
  25. .item {
  26. color: red;
  27. }
  28. /*id选择器:根据元素id属性选择--# + id值*/
  29. #ba {
  30. color: yellow;
  31. }
  32. /* 多个类选择器:两个点,不要有空格 */
  33. .item.ttu {
  34. background-color: #fff;
  35. }
  36. /*简单选择器优先级:标签 < class属性 < id属性*/
  37. span {
  38. background-color: forestgreen;
  39. }
  40. #sau {
  41. background-color: red;
  42. }
  43. .utien {
  44. background-color: yellowgreen;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <h2>购物清单</h2>
  50. <ul>
  51. <li title="one">用title属性选择,设置字体颜色</li>
  52. <li class="item">用class属性选择,设置字体颜色</li>
  53. <li id="ba">用id属性选择,设置字体颜色</li>
  54. <li class="item ttu">演示多个类选择器</li>
  55. <li></li>
  56. <li></li>
  57. <li></li>
  58. <li></li>
  59. <li></li>
  60. </ul>
  61. <span class="utien" id="sau">合计:用来演示选择器优先级</span>
  62. </body>
  63. </html>
  64. <!--上下文选择器-->
  65. <!DOCTYPE html>
  66. <html lang="en">
  67. <head>
  68. <meta charset="UTF-8" />
  69. <title>上下文选择器</title>
  70. <style>
  71. /*后代选择器`空格`:选择当前元素的所有后代元素*/
  72. ul a {
  73. color: red;
  74. }
  75. /*父子选择器`>`:选择当前元素的所有子元素;span不会被选中*/
  76. ul > a {
  77. color: yellow;
  78. }
  79. /*同级相邻选择器`+`:选择拥有共同父级且相邻的元素 */
  80. .haiba + a {
  81. color: greenyellow;
  82. }
  83. /*同级所有选择器`~` :选择拥有共同父级的该元素之后的所有元素*/
  84. .ba ~ a {
  85. background-color: dodgerblue;
  86. }
  87. </style>
  88. </head>
  89. <body>
  90. <ul>
  91. <a href="">1</a>
  92. <li>
  93. <a href="">2.1</a>
  94. <a href="">2.2</a>
  95. <a href="" class="haiba">2.3</a>
  96. <a href="">2.4</a>
  97. <a href="">2.5</a>
  98. <a href="">2.6</a>
  99. <div>
  100. <a href="" class="ba">3.1</a>
  101. <a href="">3.2</a>
  102. <a href="">3.3</a>
  103. </div>
  104. </li>
  105. </ul>
  106. </body>
  107. </html>
  108. <!--伪类选择器-不分组匹配-->
  109. <!DOCTYPE html>
  110. <html lang="en">
  111. <head>
  112. <meta charset="UTF-8">
  113. <title>伪类选择器-不分组匹配</title>
  114. <style>
  115. /*grid画九宫格*/
  116. .container {
  117. width: 300px;
  118. height: 300px;
  119. display: grid;
  120. grid-template-columns: repeat(3, 1fr);
  121. gap: 5px;
  122. }
  123. /* 类选择器 */
  124. .item {
  125. font-size: 2rem;
  126. background-color: #0086b3;
  127. display: flex;
  128. justify-content: center;
  129. align-items: center;
  130. }
  131. /*匹配第一个子元素:`:first-child`*/
  132. .container > :first-child {
  133. color: red;
  134. }
  135. /*匹配最后一个子元素:`:last-child` */
  136. .container > :last-child {
  137. color: greenyellow;
  138. }
  139. /*选择元素的唯一子元素:`:only-child` */
  140. /*匹配任意位置的子元素:`:nth-child(n)`*/
  141. .container > :nth-child(5) {
  142. color: yellow;
  143. }
  144. /*匹配任意位置的子元素-表达式:`:nth-child(2n、ven)偶数`*/
  145. .container > :nth-child(2n) {
  146. font-size: 40px;
  147. }
  148. /*匹配任意位置的子元素-表达式:`:nth-child(2n-1、odd)奇数`*/
  149. .container > :nth-child(2n-1) {
  150. font-size: 5px;
  151. }
  152. /*表达式选择前3*/
  153. .container > :nth-child(-n + 3) {
  154. border-radius: 10px;
  155. }
  156. /*表达式选择后2*/
  157. .container > :nth-child(-n + 3) {
  158. border-radius: 10px;
  159. }
  160. /*匹配倒数任意位置的子元素:`:nth-last-child(n)`*/
  161. .container > :nth-last-child(3) {
  162. background-color: #fff;
  163. }
  164. /* 从第6个开始,选择剩下的所有元素 */
  165. .container > :nth-child(n + 6) {
  166. border: 5px solid coral;;
  167. }
  168. </style>
  169. </head>
  170. <body>
  171. <div class="container">
  172. <div class="item">1</div>
  173. <div class="item">2</div>
  174. <div class="item">3</div>
  175. <div class="item">4</div>
  176. <div class="item">5</div>
  177. <div class="item">6</div>
  178. <div class="item">7</div>
  179. <div class="item">8</div>
  180. <div class="item">9</div>
  181. </div>
  182. </body>
  183. </html>
  184. <!--伪类选择器-分组匹配-->
  185. <!DOCTYPE html>
  186. <html lang="en">
  187. <head>
  188. <meta charset="UTF-8">
  189. <title>伪类选择器-分组匹配</title>
  190. <style>
  191. /*grid画九宫格*/
  192. .container {
  193. width: 300px;
  194. height: 300px;
  195. display: grid;
  196. grid-template-columns: repeat(3, 1fr);
  197. gap: 5px;
  198. }
  199. /* 类选择器 */
  200. .item {
  201. font-size: 2rem;
  202. background-color: #0086b3;
  203. display: flex;
  204. justify-content: center;
  205. align-items: center;
  206. }
  207. /*`:first-of-type`:匹配按类型分组后的第一个子元素*/
  208. .container > div:first-of-type{
  209. color: red;
  210. }
  211. /*`:last-of-type`:匹配按类型分组后的最后一个子元素*/
  212. .container > div:last-of-type{
  213. color: greenyellow;
  214. }
  215. /*`:only-of-type`:匹配按类型分组后的唯一子元素*/
  216. /*`:nth-of-type()`:匹配按类型分组后的任意位置的子元素*/
  217. .container > span:nth-of-type(2){
  218. color: yellow;
  219. }
  220. /* span分组前三个 */
  221. .container span:nth-of-type(-n + 3) {
  222. background-color: grey;
  223. }
  224. /*`:nth-last-of-type()`:匹配按类型分组后倒数任意位置的子元素*/
  225. .container div:nth-last-of-type(-n + 2) {
  226. background-color: coral;
  227. }
  228. .container > div:first-of-type:hover {
  229. background-color: black;
  230. }
  231. </style>
  232. </head>
  233. <body>
  234. <div class="container">
  235. <div class="item">1</div>
  236. <div class="item">2</div>
  237. <div class="item">3</div>
  238. <div class="item">4</div>
  239. <!-- 分为二组 -->
  240. <span class="item">5</span>
  241. <span class="item">6</span>
  242. <span class="item">7</span>
  243. <span class="item">8</span>
  244. <span class="item">9</span>
  245. </div>
  246. </body>
  247. </html>
  248. <!--其它伪类选择器-->
  249. <!DOCTYPE html>
  250. <html lang="en">
  251. <head>
  252. <meta charset="UTF-8">
  253. <title>其它伪类选择器</title>
  254. <style>
  255. /*:root-指html*/
  256. :root {
  257. background-color: lightgreen;
  258. }
  259. /*enabled:可用*/
  260. input:enabled {
  261. background-color: blanchedalmond;
  262. }
  263. /*disabled:禁用*/
  264. input:disabled {
  265. background-color: lightgreen;
  266. }
  267. /*required:必填*/
  268. input:required {
  269. background-color: yellow;
  270. }
  271. </style>
  272. </head>
  273. <body>
  274. <h3>用户登录</h3>
  275. <form action="" method="post">
  276. <div>
  277. <label for="email">邮箱:</label>
  278. <input
  279. type="email"
  280. id="email"
  281. name="email"
  282. required
  283. placeholder="example@email.com"
  284. />
  285. </div>
  286. <div>
  287. <label for="password">密码:</label>
  288. <input
  289. type="password"
  290. id="password"
  291. name="password"
  292. required
  293. placeholder="不得少于6位"
  294. />
  295. </div>
  296. <div>
  297. <label for="save">保存密码:</label>
  298. <input type="checkbox" id="save" name="save" checked readonly />
  299. </div>
  300. <div>
  301. <label for="save_time">保存期限:</label>
  302. <select name="save_time" id="save_time">
  303. <option value="7" selected>7天</option>
  304. <option value="30">30天</option>
  305. </select>
  306. </div>
  307. <div>
  308. <input type="hidden" name="login_time" value="登陆时间戳" />
  309. </div>
  310. <div>
  311. <label for="warning">警告:</label>
  312. <input
  313. type="text"
  314. id="warning"
  315. value="一天内仅允许登录三次"
  316. style="border: none;"
  317. disabled
  318. />
  319. </div>
  320. <script>
  321. // js未学,暂时忽略,只须知道功能即可: 自动生成时间戳,填充到表单隐藏域中
  322. document.querySelector('[type="hidden"]').value = new Date().getTime();
  323. </script>
  324. </form>
  325. </body>
  326. </html>

总结

1、css选择器十分重要,以前总是觉得别人的css代码简洁明了,自己一上手写就会很长很长。

2、最长用的选择器应该是元素选择器和类选择器,应该重点掌握。

3、本节难点我觉得是伪类选择器中的分组和不分组匹配,但是它也有规律,多上手练习,然后背下来; 其它伪类可以使代码样式更丰富多彩,鼠标悬浮:hover 比较常用,应该用心记下来。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议