Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 权重的原理与结构伪类
Blogger Information
Blog 28
fans 0
comment 0
visits 13025
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
权重的原理与结构伪类
手机用户1594223549
Original
306 people have browsed it

## ### 一.实例演示权重的原理和计算方法

1.实例输出结果

2.html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>选择器的权重原理与计算方式</title>
  8.     <link rel="stylesheet" href="css/weight.css" />
  9. </head>
  10. <body>
  11.     <div class="col-md-6 bgc yellow">Header</div>
  12. </body>
  13. </html>

3.css代码

  1. /* ! 1.选择器权重的原理及计算方法 */
  3. /* ? (1) 实体标记：id, class, tag */
  4. /* ? (2) 排列顺序:id, class, tag  */
  5. /* ? (3) 计数方式：根据选择器中的实体标记数量计数 */
  7. /* ! 2.选择器权重的实例演示 */
  9. /* ? (1) 权重的表示方法 */
  11. /* * id = #active = 1 */
  12. /* * class = .top,.title = 2 */
  13. /* * tag = header,h1,div = 3 */
  14. /* * 所以此案例权重为（1,2,3） */
  16. header.top h1.title div#active {
  17.   color: red;
  18. }
  20. /* ? (2)权重的优先级 */
  22. /* 0,0,1 */
  23. h1 {
  24.     color: red;
  25.   }
  27. /* 0,0,1 */ 
  28.   h1 {
  29.     color: yellow;
  30.   }
  32. /* * 根据css规则,层叠样式,后面的样式,会覆盖前面的样式 */
  33. /* * 但是该方案会导致自定义样式规则,依赖书写位置和书写顺序 */
  35. /* * 可以将h1(0,0,1)权重提升至大于(0,0,1)即可 */
  36. /* * 将`h1`改为`body h1`,便可摆脱依赖书写位置和顺序 */
  38. body h1 {
  39.     color: yellow;
  40.   }
  42. /* ? (3)尽量不要在 `html` 中使用 `id`属性 */
  44. /* * id 权重过大, 位于权重顶端  */
  45. /* * id 会导致选择器失去弹性/弹性不足, 不利于调试或复用 */
  47. /* ? (4)权重经典应用场景:class 动态调整样式案例如下 */
  49. .col-md-6 {
  50.     height: 5em;
  51.     border: 3px solid;
  52.   }
  54. /* * 如果需要修改 .col-md-6.bgc 的样式 */
  55. /* * 通过修改源码或者提高权重的方法都不可取 */
  56. /* * 最小的代价就是修改html源码,添加自定义分类 */
  58.   .col-md-6.bgc {
  59.     background-color: lightgreen;
  60.   }
  62.   .col-md-6.yellow {
  63.     color: yellow;
  64.   }

二.实例结构伪类演示

1.实例输入结果

(1)简单结构伪类匹配第1个

(2)简单结构伪类匹配第2个

(3)简单结构伪类匹配最后1个

(4)结构伪类语法糖匹配第1个

(5)结构伪类语法糖匹配最后1个

(6)结构伪类an+b正向匹配全部

(7)结构伪类an+b正向匹配第3个到最后1个

(8)结构伪类反向匹配前3个

2.html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>结构伪类</title>
  8.     <link rel="stylesheet" href="css/fake-class.css" />
  9.   </head>
  10.   <body>
  11.     <ul class="list">
  12.       <li class="li">item1</li>
  13.       <li class="li">item2</li>
  14.       <li class="li">item3</li>
  15.       <li class="li">item4</li>
  16.       <li class="li">item5</li>
  17.       <li class="li">item6</li>
  18.     </ul>
  19.   </body>
  20. </html>

3.css代码

  1. /* ! 1.结构伪类-简单匹配 */
  2. /* ? （1）用伪类匹配第1个 */
  3. /* .list > li:nth-of-type(1) {
  4.     background-color: lightblue;
  5. } */
  7. /* ? （2）用伪类匹配第2个 */
  8. /* .list > li:nth-of-type(2) {
  9.     background-color: lightblue; */
  11. /* ? ..... */
  12. /* ? （3）用伪类匹配最后一个 */
  13. /* .list > li:nth-of-type(6) {
  14.     background-color: lightblue; */
  16. /* ! 2.结构伪类-复杂匹配 */
  17. /* ? (1)匹配第一个和最后一个:用语法糖 */
  19. /* * 匹配第1个 */
  20. /* .list > li:first-of-type {
  21.     background-color: lightblue;
  22. } */
  24. /* * 匹配最后1个 */
  25. /* .list > li:last-of-type {
  26.     background-color: lightblue;
  27. } */
  29. /* ? (2)通过 :nth-of-type(an + b) 匹配前三个 */
  30. /* a系数,n参数,b偏移量从0开始,计算出来的索引必须是有效的(从1开始) */
  32. /* * 匹配第1个 */
  33. /* .list > li:nth-of-type(0n+1) {
  34.     background-color:lightblue ;
  35. } */
  37. /* * 匹配第3个 */
  38. /* .list > li:nth-of-type(0n+3) {
  39.     background-color:lightblue ;
  40. } */
  42. /* * 匹配全部用正向匹配(a=1) */
  43. /* a=1,n不变,b从0开始 */
  44. /* .list > li:nth-of-type(1n+0) {
  45.     background-color:lightblue; */
  47. /* * 匹配第4个-第6个用正向匹配(a=1) */
  48. /* .list > li:nth-of-type(1n+3) {
  49.     background-color: lightblue;
  50. } */
  52. /* * 匹配前三个用反向匹配(a=-1)*/
  53. .list > li:nth-of-type(-1n + 3) {
  54.     background-color: lightblue;
  55.   }
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