简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 选择器权重+伪类选择器及参数
Blogger Information
Blog 20
fans 0
comment 0
visits 11507
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
选择器权重+伪类选择器及参数
愿情的博客
Original
442 people have browsed it

1，选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>选择器权重</title>
  9.     <link rel="stylesheet" href="css/selector-weight.css" />
  11.     <!-- <style>
  12.         body {
  13.             background-color: red;
  14.         }
  15.     </style> -->
  17.     <!-- 文档样式  > 外部样式 -->
  18. </head>
  20. <body>
  21.     <h1 class="title" id="active">Hello</h1>
  22.     <div class="col-md-3 vip"></div>
  25. </body>
  27. </html>
  1. /* id: 千位
  2. class: 百位
  3. tag: 个位 */
  6. /* id:0 
  7. class: 0
  8. tag: 2
  9. 权重 : 0,0,2 */
  11. body h1 {
  12.     color: violet;
  13. }
  16. /* 调试样式 */
  18. body {
  19.     background-color: red !important;
  20. }
  23. /* 0,1,2 */
  26. /* body h1.title {
  27.     color: red;
  28. } */
  31. /* 0,1,0 > 0,0,2 */
  33. h1.title {
  34.     color: red;
  35. }
  38. /* 1,0,0 > 0,1,1 */
  41. /* 1,1,2 */
  43. body h1#active.title {
  44.     color: seagreen;
  45. }
  48. /* (0,0,1) */
  51. /* !important: 最高指示,忽略任何权重 */
  54. /* !important: 调试样式 */
  56. h1 {
  57.     color: chartreuse !important;
  58. }
  61. /* (1, 1, 1) */
  63. h1#active.title {
  64.     color: blue;
  65. }
  68. /* 1,1,1 --> 1,1,2 */
  71. /* 权重让选择器摆脱了对书写顺序的依赖 */
  74. /* 0,0,2 > 0,0,1 */
  78. h1 {
  79.     color: darkorange;
  80. }
  85. /* (0,1,1) */
  87. div.col-md-3 {
  88.     border: 1px solid #000;
  89. }
  91. body {
  92.     background-color: yellow;
  93. }
  96. /* (0,2,1)  > (0,,1,1) */
  98. div.col-md-3.vip {
  99.     border: 1px solid #000;
  100.     /* .... */
  101. }
  104. /* 原因就是不需要修改框架源码,只需要通过动态调整优先级就可以改变默认样式 */

2,伪类选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>伪类选择器</title>
  9.     <style>
  10.         @import url('css/selector-fake.css');
  11.     </style>
  12. </head>
  14. <body>
  15.     <!-- 伪: 假 -->
  16.     <!-- 类: class  -->
  18.     <!-- 结构伪类 -->
  19.     <ul class="list">
  20.         <li>item1</li>
  21.         <li>item2</li>
  22.         <li>item3</li>
  23.         <li>item4</li>
  24.         <li>item5</li>
  25.         <li>item6</li>
  26.         <li>item7</li>
  27.         <li>item8</li>
  28.         <li>item9</li>
  29.         <li>item10</li>
  30.         <li>item11</li>
  31.         <li>item12</li>
  32.         <li>item13</li>
  33.         <li>item14</li>
  34.         <li>item15</li>
  35.         <li>item16</li>
  36.         <li>item17</li>
  37.         <li>item18</li>
  38.     </ul>
  39. </body>
  41. </html>
  1. /* 分组结构伪类, 用于选择:子元素 */
  4. /* 所以应该给它一个查询起点 */
  7. /* .list>.first {
  8.     background-color: violet;
  9. } */
  12. /* .list>li:nth-of-type(1) {
  13.     background-color: violet;
  14. } */
  17. /* nth-of-type(1)  ===> first-of-type  */
  19. .list>li:first-of-type {
  20.     background-color: green;
  21. }
  24. /* .list>li:nth-of-type(11) {
  25.     background-color: violet;
  26. } */
  28. .list>li:last-of-type {
  29.     background-color: red;
  30. }
  33. /* 倒数第4个 */
  36. /* .list>li:nth-of-type(10) {
  37.     background-color: violet;
  38. } */
  40. .list>li:nth-last-of-type(4) {
  41.     background-color: violet;
  42. }
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>结构伪类的参数</title>
  9.     <style>
  10.         /* @import url('css/selector-fake-parma.css'); */
  12.         @import 'css/selector-fake-parma.css';
  13.     </style>
  14. </head>
  16. <body>
  17.     <ul class="list">
  18.         <li>item1</li>
  19.         <li>item2</li>
  20.         <li>item3</li>
  21.         <li>item4</li>
  22.         <li>item5</li>
  23.         <li>item6</li>
  24.         <li>item7</li>
  25.         <li>item8</li>
  26.     </ul>
  27. </body>
  29. </html>
  1. /*
  2.      :nth-of-type(an+b)
  3.      1. a: 系数, [0,1,2,...]
  4.      2. n: [0,1,2,3,....]
  5.      3. b: 偏移量, 从0开始
  6.      注: 计算出来的索引,必须是有效, 从1开始
  7.    */
  10. /* 选择元素只有二种情况:
  11. 1. 选择一个
  12. 2. 选择一组 */
  15. /* 1. 匹配一个, a = 0 */
  18. /* :nth-of-type(an+b) */
  21. /* 匹配第3个 */
  24. /* a=0,n=[0,1,...], b = 3  */
  27. /* .list> :nth-of-type(0n + 3) {
  28.     background-color: lightgreen;
  29. } */
  32. /* .list> :nth-of-type(3) {
  33.     background-color: lightgreen;
  34. } */
  37. /* 2. 匹配一组 */
  40. /* 2.1 a = 1 */
  43. /* .list> :nth-of-type(1n) {
  44.     background-color: lightgreen;
  45. } */
  48. /* n = 0,1,2...
  50. 1*0 =0
  51. 1*1 = 1
  52. 1*2 = 2
  53. 1*3 = 3
  55. [1,2,3,....] */
  58. /* .list> :nth-of-type(n) {
  59.     background-color: lightgreen;
  60. } */
  63. /* .list>* {
  64.     background-color: lightgreen;
  65. } */
  68. /* 实际开发中, 使用 n+b(偏移量)来快速选择一组元素 */
  71. /* 匹配第3个元素后面的所有兄弟元素 */
  74. /* .second~* {
  75.     background-color: violet;
  76. } */
  79. /* .list> :nth-of-type(n + 3) {
  80.     background-color: lightgreen;
  81. } */
  84. /* n = 0,1,2,...
  86. 0+3=3
  87. 1+3=4
  88. 2+3=5
  89. .... */
  92. /* a=-1  */
  95. /* 取前3个 */
  98. /* .list> :nth-of-type(-n + 3) {
  99.     background-color: lightgreen;
  100. } */
  103. /* -1*0 + 3 = 3
  104. -1*1 + 3 = 3-1 = 2
  105. -1*2 + 3 = 3-2 = 1
  106. -1*3+3 = 3-3 = 0
  108. [3,2,1] */
  111. /* 最后三个,只需要换一下选择器, 参数不变 */
  114. /* .list> :nth-last-of-type(-n + 3) {
  115.     background-color: lightgreen;
  116. } */
  119. /* .list> :nth-of-type(2n - 1) {
  120.     background-color: lightgreen;
  121. } */
  124. /* 
  125. .list> :nth-of-type(odd) {
  126.     background-color: lightgreen;
  127. } */
  129. .list> :nth-of-type(even) {
  130.     background-color: lightgreen;
  131. }
  134. /* odd: 奇数, even: 偶数 */
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：附上图例更佳
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！