当前位置 知且行 大前端 正文 下一篇:

css的继承性与层叠性

继承性

css中有些属性设置后,其后代元素会继承该属性,如:

可以继承的属性:

  • color
  • text-*,如,text-decoration:underline;
  • font-*, 如,font-size:10px;
  • line-*

不可继承的属性:

  • backgroud-color
  • border
  1. body {
  2. font-size: 14px;
  3. }

层叠性

css的全称是:Cascading Style Sheets, 即:层叠样式表。说明css的样式是可以叠加的。

如,我们可以通过多个选择器的方式对某个元素添加样式,这些样式是层层叠加的,就好像做蛋糕一样,一层层抹上去

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Css</title>
  6. <style>
  7. div {
  8. color: #f00;
  9. }
  10. p {
  11. font-size: 18px;
  12. }
  13. .test {
  14. font-weight: bold;
  15. }
  16. div p {
  17. border: 1px solid #000;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div>
  23. <p class="test">
  24. 测试层叠性
  25. </p>
  26. </div>
  27. </body>
  28. </html>

通过 chrome 的调试模式,可以一目了然地看到所有的css样式都叠加了。

那么问题来了,如果样式冲突了,该以哪个为准?

关于样式的权重,简单的计算方式是:id选择器 > 类选择器 > 标签选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Css</title>
  6. <style>
  7. #a {
  8. color: blue;
  9. }
  10. .b {
  11. color: green;
  12. }
  13. p {
  14. color: red;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <p id="a" class="b">
  20. 猜猜我是什么颜色
  21. </p>
  22. </body>
  23. </html>

相对复杂的权重计算方式将在下篇文章介绍

转载必须注明出处:https://www.zhiqiexing.com/13.html

关于我

我希望能成为一个认真、有趣、创造更多价值的人
关注微信
微信扫一扫关注我

微信扫一扫关注我

返回顶部