享受每一天,Just Enjoy !

0%

CSS基础4--冲突和继承

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

冲突

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

层叠

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

优先级

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

1
2
3
4
5
6
7
8
9
10
11
<!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文件

1
2
3
4
5
6
7
.h-color {
color: red;
}

h1 {
color: blue;
}

打开浏览器查看效果

可见效果是红色的

继承

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

控制继承

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

考虑层叠

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

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

关注公众号获取更多内容