一、继承性
子元素会继承父元素的某些样式
主要是文本类的样式可以继承:
属性:color、text-indent、text-align、font-style、font-weight、font-size、 font-family、line-height
注:a标签不会继承父元素的文字颜色,h1-h6标题标签不会继承父元素的字体大小
样式:
.box {
height: 100px;
width: 100px;
font-size: 30px;
color: cadetblue;
line-height: 50px;
text-decoration: underline;
}
内容:
<div class="box">
<p>牛肉</p>
<span>火腿</span>
</div>
二、层叠性
样式发生冲突的时候,后边的样式会覆盖(层叠)前边的样式,就近原则
注:连写的时候,不写的值取默认值,背景颜色默认透明,行高不写,取默认值normal
.box {
font-size: 50px;
color: yellow;
color: red;
}
三、优先级
优先级是css解决样式冲突的一种能力,样式冲突的时候,优先级高的选择器,优先生效,权重是优先级的具体表
- 公式:继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
- 0,0,0,0 0,0,0,1 0,0,1,0 0,1,0,0 1,0,0,0 无穷大
样式:
<style>
div {
color: aquamarine !important;
}
.box {
color: chocolate;
}
#nav {
color: darkslategray;
}
</style>
内容:
<body>
<div class="box" id="nav" style="color: blueviolet;">优先级</div>
</body>
四、权重
- 继承性,子元素和父元素的样式没有冲突,子元素会继承父元素的某些样式
- 子元素和父元素的样式冲突,永远执行子元素的样式,继承权重为0
- #box对于span标签来说,是父元素的样式,对于span来说权重为0,0,0,0
-
span标签选择器,对于span来说,权重是0,0,0,1
<style>
#box {
font-size: 50px;
color: blueviolet;
}
span {
font-size: 24px;
color: green;
}
</style>
</head>
<body>
<div id="box">
<span>继承性</span>
</div>
</body>
选择器选择的是相同的标签,权重会叠加
<style>
ul {
color: brown !important;
}
/* 0,0,0,1 */
li {
font-size: 24px;
color: #ccc;
}
/* 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.box li {
color: cadetblue;
}
/* 0,1,0,0 + 0,0,0,1 = 0,1,0,1 */
#nav li {
color: darkorange;
}
</style>
</head>
<body>
<ul class="box" id="nav">
<li>权重</li>
</ul>
</body>