ASCII码 ASCII码

CSS选择器中优先级和权重区别

发布于：2022-07-07 13:56:09  栏目：技术文档

自定义样式的来源与优先级

  1. <!DOCTYPE html>
  2. <html lang="en">
  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/zuoye.css">
  9. </head>
  10. <body>
  11.     <h2 style="color: red;" class="color"  id="color">我是最高级内联样式</h2>
  12.     <h2 class="color"  id="color">我是外部样式class，但是只能优先显示id</h2>
  13.     <h2 class="color">我只是为了演示class颜色而已</h2>
  15.     <!-- 通过演示效果的优先级 -->
  16.     <!-- 自定义样式优先级如下-->
  17.     <!--内链式>id>class -->
  18.     <!-- 内嵌式红色大于id 黄色 大于class蓝色-->
  19. </body>
  20. </html>
  1. <!-zuoye.css->
  2. .color{color: blue;}
  3. #color{color: yellow;}

实际页面演示

演示

常用选择器与权重分析方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  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/zuoye2.css">
  9. </head>
  10. <body>
  11.     <div>选择器</div>
  12.     <ul class="list" id="nav">
  13.         <li class="item">显示1</li>
  14.         <li class="item">显示2</li>
  15.         <li class="item">显示3</li>
  16.     </ul>
  17.     <!--权重分类id，class ,tag(标签) 三类 -->
  18. </body>
  19. </html>
  1. <!-zuoye2.css->
  2. /* 当前css 按照《选择权重》顺序书写*/
  3. #nav{background-color: yellow;}
  4. .list>.item{border: 1px  solid red;}
  5. li{list-style: none;}

实际页面演示

演示

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行