Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css选择器的权重规则
Blogger Information
Blog 14
fans 0
comment 0
visits 7643
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
css选择器的权重规则
深巷的博客
Original
518 people have browsed it

css选择器的权重规则

  • 标记和优先级：不同标记权重优先级顺序: id > class > tag
  • 数量和优先级：相同标记，数量越大，权重越大
  • 位置和优先级：相同标记数量，位置越靠后，权重越大
  • 权重计算方式：id,class,tag 分别进行数量比较，数量越大，权重越大
  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>Document</title>
  8.     <style>
  9.         /* 权重规则 */
  10.         /* 1.标记优先级：`id` > `class` > `tag`*/
  11.         /* 2.数量优先级：相同标记，数量越大，权重越大 */
  12.         /* 3.位置优先级：相同标记数量，位置越靠后，权重越大 */
  13.         /* 4.权重计算：`id`,`class`,`tag` 分别进行数量比较，数量越大，权重越大 */
  15.         /* 数量：id=>0, class=>1, tag=>1  结果：011 */
  16.         li.a1{
  17.             color: green;
  18.         }
  19.         /* 数量：id=>0, class=>1, tag=>1  结果：011 */
  20.         li:nth-of-type(1){
  21.             color: olive;
  22.         }
  23.         /* 数量：id=>0, class=>1, tag=>1  结果：011 */
  24.         li:first-of-type{
  25.             color: red;
  26.         }
  27.         /* 数量：id=>1, class=>1, tag=>1  结果：111 */
  28.         li#item.a1{
  29.             color: yellowgreen;
  30.         }
  31.         /* 数量：id=>1, class=>1, tag=>1  结果：111 */
  32.         li#item.b1{
  33.             color: darkmagenta;
  34.         }
  35.         /* 数量：id=>0, class=>2, tag=>1  结果：021 */
  36.         li.item.a1{
  37.             color: aqua;
  38.         }
  39.         /* 数量：id=>0, class=>2, tag=>1  结果：021 */
  40.         li.item.b1{
  41.             color: goldenrod;
  42.         }
  44.         /* 结构伪类 :nth-of-type(an+b) */
  45.         /* 计算公式 ：an + b (a乘n + b)*/
  46.         /* 
  47.         n是参数默认表示有效总行数(n的值从0开始0,1,2,3...)
  48.         b是偏移值，是参数n的起始行
  49.         a根据需求和计算方法(an + b)来定义一个周期值（a 和 b 都必须为整数）
  50.         a常用值：匹配单行=>0, 匹配多行=>1, 反向匹配=>`-`用负号
  51.         */
  53.         /* 举例：匹配前3个 */
  54.         /* :nth-of-type(-1n+3) */
  55.         /* 根据乘法特性 简写为 :nth-of-type(-n+3) */
  56.         /* li:nth-of-type(-1n+3){
  57.             background-color: darkolivegreen;
  58.         } */
  59.         li:nth-of-type(-n+3){
  60.             background-color: darkolivegreen;
  61.         }
  62.     </style>
  63. </head>
  64. <body>
  65.     <ul id="list" class="list">
  66.         <li id="item" class="item a1 b1">item1</li>
  67.         <li id="item" class="item a2 b2">item2</li>
  68.         <li id="item" class="item a3 b3">item3</li>
  69.         <li id="item" class="item a4 b4">item4</li>
  70.         <li id="item" class="item a5 b5">item5</li>
  71.         <li id="item" class="item a6 b6">item6</li>
  72.         <li id="item" class="item a7 b7">item7</li>
  73.         <li id="item" class="item a8 b8">item8</li>
  74.         <li id="item" class="item a9 b9">item9</li>
  75.         <li id="item" class="item a10 b10">item10</li>
  76.     </ul>
  77. </body>
  78. </html>

示例图：
css选择器的权重规则

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