CSS三大特性

css层叠性

所谓层叠性是指多种CSS样式的叠加:

1.给一个标签设置的样式发生冲突的时候即样式的覆盖
2.如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
       .one {
            color: hotpink;
            font-size: 30px;
        }
       .two {
            color: skyblue;
            font-size:40px;
        }
    </style>
</head>
<body>
    <div class="two one">文字内容</div>
</body>
</html>

结果是:.two样式生效

CSS继承性

所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。

与文字有关的属性都可以,实现继承:

1.发生的前提是:标签之间属于一种嵌套关系
2.文字颜色可以之间继承
3.字体大小可以继承
4.字体可以继承
5.行高也可以实现继承

特殊点:

1.a标签超链接不能实现字体颜色的继承,字体大小可以继承
2.h1不可以继承文字的大小,继承过来还会做一个计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>
        <a href="">这是一个链接</a>
    </div>
</body>
</html>

结果:a标签会继承div的样式

CSS优先级

定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。

关于CSS权重,我们需要一套计算公式来计算,这个就是CSS Specificity,我们称为CSS特性或称非凡性,它是一个衡量CSS值优先级的一个标准。具体规范如下:

继承或者*的贡献值 0,0,0,0
元素(标签)贡献值为 0,0,0,1
类,伪类贡献值为 0,0,1,0
ID贡献值为 0,1,0,0
行内样式贡献值 1,0,0,0
!important贡献值 ∞无穷大

注意:

  1. 数位之间没有进制,比如说:0,0,0,5+0,0,0,5=0,0,0,10而不是0,0,1,0,所以不会存在10个div能赶上一个类选择器的情况。
  2. 继承的权重是0
  3. 权重相同时,CSS遵循就近原则

总结:

权重是优先级的算法,层叠是优先级的表现

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        ul li { /* ul 0001 li 0001 叠加 0,0,0,2*/
            color: green;
        }
        li { /*0,0,0,1*/
            color: red;
        }
        nav ul li { /*叠加之后的 0,0,0,3 权重大于红色绿色,执行蓝色*/
            color: blue;
        }
        .daohang ul li {/*叠加之后的 0,0,1,2 最终执行粉色*/
            color: pink;
        }
    </style>
</head>
<body>
    <nav class="daohang">
        <ul>
            <li>李白</li>
            <li>程咬金</li>
            <li>鲁班1号</li>
        </ul>
    </nav>

</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • ## CSS三大特性 # 继承性(inherit) # 层叠性 # 优先级 # important # div标签...
    KsKison阅读 338评论 0 0
  • 谷歌浏览器开发者工具使用 进入谷歌浏览器后如下图操作,或者按F12 调整样式![](http://upload-i...
    MGd阅读 257评论 0 0
  • CSS三大特性——继承、 优先级和层叠。 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; ...
    这只兔子要起来阅读 423评论 0 0
  • CSS三大特性 : 继承,层叠,优先级 一. 继承性 1.什么是继承性? 作用: 给父元素设置一些属性, 子元素也...
    壹点微尘阅读 141评论 0 0