CSS三大特性:层叠性、继承性、优先级

CSS三大特性

层叠性、继承性、优先级

1.层叠性

相同选择器设置相同样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。

原则:

  • 样式冲突,遵循就近原则,哪个样式离结构近,就执行哪个样式
  • 样式不冲突,不会层叠
div {
    color: red;
    font-size: 20px;
}

div {
    color: pink;
}
/* 执行color: pink;和font-size: 20px; */
<div>长江后浪推前浪div>
2.继承性

子标签会继承父标签的某些样式。

div {
    color: pink;
    font-size: 20px;
}
<div>
    <p>龙生龙,凤生凤p>
div>
  • 只有部分样式可被继承(文本相关:text-,font-,line-开头元素,以及color属性)

  • 恰当使用可简化代码,降低CSS样式复杂度

行高的继承

body {
    color: yellow;
    font: 12px/1.5 'Microsoft YaHei';
}

div {
    /* 子元素继承了父元素body的行高“1.5倍” */
    /* 因此div行高为 14*1.5=21px */
    font-size: 14px;
}

p {
    /* p行高为 20*1.5=30px */
    font-size: 20px;
}

/* li没有指定文字大小 但继承body 因此行高 12*1.5=18px */
<body>
    <div>赫奇帕奇div>
    <p>赫奇帕奇p>
    <ul>
        <li>赫奇帕奇li>
    ul>
body>
  • 行高可以跟单位也可以不跟
  • 如果子元素没有设置行高,则继承父元素
  • 子元素的行高:当前子元素文字大小*行高倍数
  • 不跟单位的优势:子元素可以根据自己文字大小自动调整行高
3.优先级

当同一个元素指定多个选择器,优先级会产生

  • 选择器相同,执行层叠性
  • 选择器不同,根据选择器权重执行
#demo {
    color: blue;
}

.test {
    color: pink !important;
}

div {
    color: red;
}
<div class="test" id="demo" style="color: purple;">你笑起来真好看div>
选择器 选择器权重
继承 NULL
* 0,0,0,0
元素选择器 0,0,0,1
类选择器,伪类选择器,类属性值 0,0,1,0
id选择器 0,1,0,0
行内样式style="" 1,0,0,0
!important(一般在引用第三方库后更改其样式时使用) 无穷大

通配符与继承的博弈:

通配符*>继承

<body>
    <article>
        <h2>yooo<span>alisonspan>h2>
    article>
body>
* {
    color: red;
}

h2 {
    color: green;
}

在这里插入图片描述

优先级注意点:

  • 权重是4组数字组成,等级从左向右判断,永远不会进位
  • 可以简单记为无,0,1,10,100,1000,无穷
  • 继承无权重,如果标签被选出来了,不管父元素权重多高,都执行选中标签的样式
#father {
    color: red;
}

p {
    color: pink;
}

body {
    color: purple;
}

/* a链接比较特殊,浏览器默认给他指定了一个样式:蓝色下划线 a {color: blue;} */
<body>
    <div id="father">
        <p>你还是很好看p>
    div>
    <a href="#">链接a>
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
  • .nav[class] —>0,0,2,0
/* 复合选择器权重叠加问题 */
/* 权重虽然会累加,但永远不会进位 */
/* li的权重是0,0,0,1 */
li {
    color: red;
}

/* ul li的权重是0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
ul li {
    color: pink;
}

/* .nav li的权重是0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {
    color: purple;
}
<ul class="nav">
    <li>赫奇帕奇li>
    <li>拉文克劳li>
    <li>格兰芬多li>
ul>
4.预处理器

生产环境中都会使用预处理器生成css文件(less sess)

你可能感兴趣的:(CSS,css,html,前端)