博客列表 >实例演示元素来源与优先级

实例演示元素来源与优先级

上草一方
上草一方原创
2022年03月19日 21:38:03454浏览

实例演示元素来源与优先级

实例代码如下:

  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. </head>
  9. <body>
  10. <!-- 来源1:代理样式/默认样式 -->
  11. <h2>Hello</h2>
  12. <!-- 来源2:自定义样式,会覆盖默认样式 -->
  13. <h2 style="color: blueviolet;">world</h2>
  14. <!-- 来源3:书写顺序,写在后面的同名属性会覆盖前面的(优先级相同的情况下) -->
  15. <div>
  16. <!-- 某些属性具有继承特征,例如颜色、字号、字体,子 元素会继承父元素的同名属性 -->
  17. <h1 style="color: aqua;">php.cn</h1>
  18. </div>
  19. <div>
  20. <!-- a标签有自己的颜色,不会继承父元素的颜色 -->
  21. <a href="">php中文网</a>
  22. </div>
  23. <!-- 并非所有属性都可以继承,例如盒模型的属性就不能继承 -->
  24. <!-- 总体来说,样式来源就两类,一类默认的,另一类自定义的 -->
  25. </body>
  26. </html>

运行代码效果如下图:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议