css三大特性
【摘要】 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三大特性</title>
<style>
/* css有三个非常重要的三个特性：层叠性，继承性，优先级 */
/* 3.1.1css层叠性 */
/* 相同选择器给设置相同的样式会造成冲突，层叠行就是为了解决样式冲突的问题
原则1.样式冲突：遵循就近原则
2.样式不冲突，不层叠 */
h5 {
color: red;
font-size: 2em;
}
h5 {
color: blue;
}
/* 3.1.2css继承性 */
/* css中的继承形：子标签继承了父亲的特性如：文字颜色和字号 */
/* 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承） */
div {
color: brown;
font-size: 2em;
}
/* 3.1.3行高的继承 */
body {
color: green;
font: 12px/24px 'Microsoft Yahei';
}
/* 3.1.3优先级 */
/* 1.选择器相同，则根据选择器权重
继承 或者* 选择器 <元素选择器<类选择器和伪类选择器<ID选择器<行内样式style=""< !inportant这个是最大的*/
div {
color: blue;
}
.test {
color: blueviolet;
}
:test {
color: blueviolet;
}
#demo {
color: brown;
}
/* 注意点1.权重是有4组数字组成，但是不会进位。
2.可以理解为一级比一级大
3.等级判断从左向右，如果某一位数值相同，则判断下一位数值 */
/* 3.1.4css的权重叠加 */
ul li {
/* 权重是不是0001加上了一个0001 */
color: chartreuse;
}
li {
/* 这个的权重是不是还是0001 */
color: cyan;
}
.nav li {
color: blue;
}
</style>
</head>
<body>
<h5>哈哈哈</h5>
<div>
<p>哈哈啊哈</p>
<div class="text" id="demo" style="color: black;">haha</div>
</div>
<ul class="nav">
<li>哈哈哈</li>
</ul>
</body>
</html>
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）