CSS基础4--冲突和继承

冲突

在默认情况下,一些css属性继承当前元素的父元素上设置的值,有些则不继承。这也可能导致一些和期望不同的结果

层叠

当应用两条同级别的规则到一个元素的时候,写在后面的就是实际使用的规则
简而言之,在最后的效果会生效

优先级

元素选择器不是很具体:优先级低
类选择器稍微具体点: 优先级高

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>微信搜索:伊洛的小屋</title>
      <link href="index.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1 class="h-color">猜猜我是什么颜色的</h1>
  </body>
</html>

编写下CSS文件

.h-color {
    color: red;
}

h1 {
    color: blue;
}

打开浏览器查看效果



可见效果是红色的

继承

父元素上的css属性是可以被子元素继承

控制继承

inherit: 设置该属性会使子元素属性和父元素相同
initial: 设置属性值和浏览器默认样式相同
unset: 将属性重置为自然值,也就是如果属性是自然继承那么就是inherit,否则就是initial

考虑层叠

三个因素需要考虑
1.重要程度
2.优先级
3.资源顺序

不同类型的选择器有不同的分数值,把这些分数相加就得到特定选择器的权重,然后就可以进行匹配

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容