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

  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>
  14. <!-- 通过演示效果的优先级 -->
  15. <!-- 自定义样式优先级如下-->
  16. <!--内链式>id>class -->
  17. <!-- 内嵌式红色大于id 黄色 大于class蓝色-->
  18. </body>
  19. </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;}

实际页面演示

演示

更多相关文章

  1. 为什么Android不如iOS那么顺滑?
  2. HTMLa标签,img标签配合三种列表标签写出图片导航演示
  3. 注册效果与简易后台界面演示如何用html代码来写
  4. 2022年0705表单与后台框架轻量级开发演示
  5. 2022年0705表单与后台框架轻量级开发演示
  6. html简单导航与简洁课程表代码演示
  7. Android(安卓)中LocalBroadcastManager的使用方式
  8. 实例演示获取dom元素的二个重要方法
  9. 2022年7月php学习心得·第二节课程

随机推荐

  1. XML编程-DOM4J
  2. XML简明教程(7)
  3. XML编程-SAX
  4. XML编程-DOM
  5. Jibx 处理XML
  6. XML简明教程(6)
  7. DTD详解
  8. XML简明教程(5)
  9. XML简明教程(4)
  10. XML入门