雷州手机网站建设安卓优化大师手机版下载
1. 层叠性
概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆
盖）。
什么是样式冲突？ ——— 元素的同一个样式名，被设置了不同的值，这就是冲突。
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS_三大特性-层叠</title><style>/* 概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。 */#id {color: aqua;font: bold italic 20px "隶书"}p{color: red;}</style>
</head><body><div><p id="id">哈哈</p></div></body></html> 
2.继承性
概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。规则：优先继承离得近的。常见的可继承属性：text-?? ， font-?? ， line-?? 、 color ......
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS_三大特性-继承</title><style>/* 体现了继承性 设置父代属性，其后代元素也会拥有概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。规则：优先继承离得近的。*/div {color: brown;}p{color: aqua;}</style>
</head><body><div><span>我是span里的<p>我是p里的<p><span>我是span里的</span></p></p></span></div>
</body></html>
3.优先级
简单聊： !important > 行内样式 > ID 选择器 > 类选择器 > 元素选择器 > * > 继承的样
式。
1.简单聊
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器优先级_简单聊</title>
</head>
<style>/* 行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 */*{color: red;}h2{color: blue;}.slogan{color: green;}#atguigu{color: aqua;}
</style><body><h2 style="color: black;" class="slogan" id="atguigu" >尚硅谷，让天下没有难学的技术</h2></body></html>
2.详细聊
需要计算权重。
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器优先级_详细聊 </title>
</head>
<style>/* 二个类选择器一个元素选择器 */.container span.slogan{font:bold italic 30px "华文琥珀";color: blue;}div>p>span:nth-child(1){color: red;}</style><body><div class="container"><p><span class="slogan" id="atguigu" >尚硅谷，让天下没有难学的技术！</span><hr><span>欢迎同学们来学习！</span></p></div></body></html>
特殊规则：1. 行内样式权重大于所有选择器。2. !important 的权重，大于行内样式，大于所有选择器，权重最高！