【前端-初阶】CSS的三大特性

我自闭了？

已于 2023-03-22 21:51:12 修改

阅读量47

点赞数

于 2023-03-18 22:51:10 首次发布

本文链接：https://blog.csdn.net/qq_48234463/article/details/129644472

版权

CSS的三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先级。

1.层叠性

所谓层叠性是指多种CSS样式的叠加
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

原则：

样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠。

 <style>
     div {
         color: red;
     }
 
     div {
         color: pink;
     }
 </style>
 
 <body>
     <div>我是粉色</div>//就近原则
 </body>

2.继承性

概念：

子标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素即可。

 <style>
     div {
         color: red;
         font-size: 14px;
     }
 </style>
 
 <body>
     <div>
         <p>我是红色</p>
     </div>
 </body>

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承性：

 <style>
     body {
         color: red;
         /* font:14px/24px 'Microsoft Yahei'; */
         font: 12px/1.5 'Microsoft Yahei';
     }
 
     div {
         /* 子元素继承了父元素body的行高1.5 */
         /* 这个1.5就是当前元素文字大小font-size的1.5倍 所以当前div的行高就是21px */
         font-size: 14px；
     }
 
     p {
         /* 1.5*16=24 当前的行高 */
         font-size: 16px;
     }
     /* li要么手动指定文字大小 不然会继承父亲的文字大小 body 12px所有li的文字大小为12px 
     当前li的行高就是12*1.5=18 */
 </style>
 
 <body>
     <div>我是红色</div>
     <p>我是红色</p>
     <ul>
         <li>我没有指定文字大小</li>
     </ul>
 </body>

行高可以跟单位也可以不跟单位，可以设置为当前文字大小的倍数
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前子元素的文字大小*1.5
body行高1.5这样的写法的最大优势就是里面子元素可以根据自己文字大小自动调整行高

3.优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器权重如下表所示：

标签选择器	计算权重公式
继承或者 *	0,0,0,0
元素选择器，每个元素（标签选择器）	0,0,0,1
类选择器，每个类，伪类	0,0,1,0
id选择器每个ID	0,1,0,0
行内样式，每个行内样式 style=""	1,0,0,0
每个!important 最重要的	∞ 无穷大

 <style>
     body {
         color: green;
     }
 
     div {
         color: red !important;
     }
 
     .pink {
         color: pink;
     }
 
     #blue {
         color: blue;
     }
 </style>
 
 <body>
     <div class="pink" id="blue" style="color:yellow"> 我是红色</div>
     <!-- 优先级：red > yellow > blue > pink > green -->
 </body>

注：权重是有4组数字组成，但是不会有进位。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
等级判断从左到右，如果某一位数值相同，则判断下一位数值。
可以简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器为100，行内样式表为1000，!important无穷大
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

权重叠加：复合选择器会有权重叠加的问题，需要计算权重

 <style>
     /* 复合选择器会有权重叠加的问题 */
     /* ul li权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2   2*/
     ul li {
         color: red;
     }
 
     /* li的权重0,0,0,1    1*/
     li {
         color: green;
     }
 
     /* .nav li 的权重为 0,0,1,0 + 0,0,0,1 = 0,0,1,1    11*/
     .nav li {
         color: pink;
     }
 </style>
 
 <body>
     <ul class="nav">
         <li>大猪蹄子(粉色)</li>
         <li>猪肘子(粉色)</li>
         <li>排骨(粉色)</li>
     </ul>
 </body>

div ul li ——>0,0,0,3
.nav ul li——>0,0,1,2
a:hover——>0,0,1,1
.nav a——>0,0,1,1

练习：

 <style>
 .nav{
 color:red;//类选择器
 }
 
 li{
 color:pink;//元素选择器
 }
 </style>
 <body>
     <ul class="nav">
         <li>大猪蹄子(粉色)</li>
         <li>猪肘子(粉色)</li>
         <li>排骨(粉色)</li>
     </ul>
 </body>

三个小li中把第一个改为粉色加粗例子

 <style>
     /* 权重为11 */
     .nav li {
         color: red;
     }
 
     /* 权重为10 */
     /* .pink {
         color: pink;
         font-weight: 700;
     } */
 
     /* 权重为20 */
     .nav .pink {
         color: pink;
         font-weight: 700;
     }
 </style>
 
 <body>
     <ul class="nav">
         <li class="pink">大猪蹄子(粉色加粗)</li>
         <li>猪肘子(红色)</li>
         <li>排骨(红色)</li>
     </ul>
 </body>