CSS三大特性——继承、优先级与层叠
- 手机
- 2025-08-24 20:15:01
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 的权重，大于行内样式，大于所有选择器，权重最高！
CSS三大特性——继承、优先级与层叠由讯客互联手机栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“CSS三大特性——继承、优先级与层叠”
