CSS实战手册-第五章

最新推荐文章于 2021-08-04 06:47:52 发布

JackFruitxx

最新推荐文章于 2021-08-04 06:47:52 发布

阅读量134

点赞数

分类专栏： CSS实战手册文章标签： css3

本文链接：https://blog.csdn.net/qq_42651398/article/details/115164784

版权

CSS实战手册专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的样式层叠原理，包括最近的祖辈胜出、直接应用样式优先、同一标签的多样式处理等。此外，还讲解了特指度的概念，如何计算不同选择符的特指度，并强调了`!important`在解决样式冲突中的作用。最后，文章提到了重置浏览器默认样式的方法，以确保样式的一致性。

摘要由CSDN通过智能技术生成

管理多个样式:层叠

当多个规则中定义了相同的CSS属性,而且这些规则都应用在页面中同一个元素时,可能会引起冲突,而处理冲突的机制就叫层叠

层叠用于管控样式之间相互作用的方式,出现冲突时判断哪个样式的优先级高

导致样式冲突的情况:

继承,从多个祖辈中继承相同的属性
同一个元素有多个样式(为一某个段落定义了样式,又定义了p标签的样式,此时这两个样式都会应用到那个段落上)

样式层叠的方式

最近的祖辈胜出:

<style>
    body{
        color: blue;
    }
    p{
        color: red;

    }
</style>
<body>
    <p><em>离他最近的祖辈是p</em></p>
    <a>还是蓝色的a标签</a>
</body>

如果没有专门为标签定义样式,继承的属性出现冲突是,最近的祖辈胜出

直接应用在标签上的样式胜出
极端的"最近的主备胜出",自己永远是自己最近的祖辈,如a标签的颜色等等
一个标签,多个样式

除了继承是多个样式影响一个标签的方式,还可以直接吧多个样式应用到一个标签

根据样式的类型,以及定义各个样式的顺序,浏览器一次可能会使用一个或多个样式

一次使用多个样式的情况:

使用标签选择符定义了样式,又把类样式应用到标签中

    <style>
        p{color:red};
        .headLine{font-size:2em};
    </style>
    <body>
        <h2 class="headLine"></h2>
    </body>

相同样式名在样式表中出现多次

    /*群组选择符*/
    .leadHeadline, .secondaryHeadline, .newHeadline{
        ...
    }

    .leadHeadline{
        ...
    }
    /*以上两个样式都会应用在类名为leadHeadline*/

既有类样式,又有ID样式

    <style>
        #banner{
            ...
        }
        .new{
            ...
        }
    </style>
    <!-- #banner和.news样式都会应用到<div>标签中 -->
    <div id="banner" class="news">   </div>

用了多种样式表,而且每个样式表中都有名称相同的样式
多个复杂的选择符选取相同的标签

以下选择符都能选取这个段落

    #mainContent p{

    }
    #mainContent .byline{

    }
    p .byline{

    }
    .puline{

    }

特指度

CSS提供了格式,根据各种选择符的值来计算样式的特指度(specificity),值如下:

一个标签选择器记 1分
一个类选择器记 10分
一个 ID选择器记 100分
一个行内样式记 1000分

img{
    ...
}
.highlight{
    ...       
}
#log{
    ...
}

<img id="logo" class="highlight" src="logo.gif">

如果上述例子中,3个选择器中的样式出现冲突,即有相同的元素,则id选择器中的样式胜出,因为他有最大的特指度:100

注意: 伪元素(::first-line)与标签选择符一样,记1分,伪类和类选择符一样,记10分

对于复杂的后代选择符或群组选择符,计算方法是其中各个选择符的得分总和

选择符	ID	类	标签	总分
p	0	0	1	1
.byline	0	1	0	10
p.byline	0	1	1	11
#banner	1	0	0	100
#banner p	1	0	1	101
a:link	0	1	1	11
p:first-line	0	0	2	2
h2 strong	0	0	2	2
#wrapper #content .byline a:hover	2	2	1	221

注意: 继承的属性没有特指度!因此即便是从特指度高处继承的样式,还是会被直接应用在标签中的属性覆盖

特指度相同时后一个样式胜出

如果内部样式表和外部样式表中的样式发生冲突,则比较<link>和<style>的先后顺序.
最好的做法是:“先普遍,再特别”,因为内部样式表一般是一个网页独特的样式,而外部样式表是可以多个网页共用的样式,因此应该先链接外部样式表

同时使用两个外部样式表同上

忽略特指度

a{
    color:teal !important;
}
/* 在属性后加上!important 会让该属性忽略特指度*/

重置默认样式:

/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol { 
	padding-left: 1.4em;
	list-style: decimal;
}
ul {
	padding-left: 1.4em;
	list-style: square;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
/* end reset browser styles */