「前端架构师详解Css09」“类天猫双十二侧边栏”及

「前端架构师详解Css09」“类天猫双十二侧边栏”及css三大特性

情提示：以下代码是我们邀请的前端架构师基于天猫门户编写的css相关代码，现在免费分享给大家，获取的方式为：

关注此头条号“互联网IT信息”——>私信发送 “天猫css” ，（注意：css全是小写）即可得到源代码的获取方式。

1. 此篇文章讲解目录：

案例和由此案例重点讲解的知识点介绍
案例代码实现
css三大特性知识点详解

2. 案例和相关知识点介绍

此案例是页面，效果如下：

此页面的技术实现解析：

使用标签选择器定义通用样式，通过css层叠性和继承性来让通用标签的样式被继承到类选择器上

此案例中主要用到了，基于此，我们会系统的将如下知识点全部讲解：

css三大特性：层叠性、继承性、优先级

3. 此案例的代码实现

第一步：使用块级标签和无序列表编写导航侧边栏的html

第二步：通过标签选择器定义ul li a的通用样式

第三步：定义外层div样式

第四步：通过类选择器定义无序列表样式，其中li和a标签的基本样式继承自第二步的标签选择器

4. 此案例的知识点详解

CSS三大特性：

层叠性、继承性、优先级

1）层叠性：

1. 给一个标签设置的样式发生冲突的时候即样式的覆盖

2. 浏览器的渲染机制是从上到下的，当有冲突的时候就采用最后的那个样式

例如：

h2.grape {color: purple;}

h2 {color: siver;}

层叠性代码实例：

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Document</title>

<styletype="text/css">

.two{

color: green;

}

.one{

color: red;

font-size: 30px;

}

.tree{

color: yellow;

font-size: 40px;

}

</style>

</head>

<body>

<pclass="one two tree">

一段文字

</p>

</body>

</html>

2）继承性：继承就是子标签继承了上级标签的CSS样式的属性

1，发生的前提是：标签之间属于一种嵌套关系

2，文字颜色可以之间继承

3，字体大小可以继承

4，字体可以继承

5，行高也可以实现继承

6，与文字有关的属性都可以，实现继承

特殊注意：

a标签超链接不能实现字体颜色的继承，字体大小可以继承

h1不可以继承文字的大小，继承过来还会做一个计算

继承性代码实例：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<style>

div{

color: red;

font-size: 30px;

}

</style>

</head>

<body>

<div>

<ahref="">a</a>

</div>

</body>

</html>

3) 优先级

具体解释如下：

内联样式最大，内联样式的优先级最高。

ID选择器的优先级，仅次于内联样式。

类选择器优先级低于ID选择器

标签选择器低于类选择器。

补充：

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

所有都相同时，声明靠后的优先级大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

综述：

-行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式

important > 内联 > ID > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承

css优先级代码实例：

<!DOCTYPE>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

<style>

*{ font-size:56px;}

p{ font-size:32px; color:#60C;}

.d{ color:#F0F;}

#hei{ color:#96F;}

</style>

</head>

<body>

<pclass="d"id="hei"style="color:#FF0;">我是段落3</p>

<ahref="#">我是超链接</a>

<span>我是备胎标签</span>

</body>

</html>

大家好接下来我们会邀请前端架构师以连载的方式，并且结合阿里天猫商城的门户，系统讲解Css的专业知识，欢迎大家关注头条号“互联网IT信息”。

.CSS层叠性

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

是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

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

长江后浪推前浪，前浪死在沙滩上。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            color: red;            font-size: 28px;        }        div{            color: blue;            font-weight: bold;        }</style></head><body>    <div>码海无际</div></body></html>

2.CSS继承性

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

简单的理解就是：子承父业。

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div {            color: blue;        }</style></head><body>    <div>        <span>            码海无际        </span>    </div></body></html>

3.CSS优先级

1.CSS优先级

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

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        span{            color: red;        }        div {            color: blue;        }</style></head><body>    <div>        <span>            码海无际        </span>    </div></body></html>

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #my-div {            color: blue;        }</style></head><body>    <div id="my-div" style="color: red">        码海无际    </div></body></html>

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div {            color: blue;        }        div {            color: red;        }</style></head><body>    <div>        码海无际    </div></body></html>

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div {            color: blue !important;        }        div {            color: red;        }</style></head><body>    <div>        码海无际    </div></body></html>

2.CSS特殊性

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

Specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

权重是可以叠加的，比如：

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 p       ------>      0,1,0,1

注意：

数位之间没有进制比如说：0,0,0,5 + 0,0,0,5=0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。
继承的权重是 0 。

总结优先级：

使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
只包含一个通用选择器的规则。
同一类选择器则遵循就近原则。

义CSS样式时，经常出现两个或更多样式规则应用在同一元素上的情况。此时CSS就会根据样式规则的权重，优先显示权重最高的样式。CSS优先级指的就是CSS样式规则的权重。在网页制作中，CSS为每个基础选择器都指定了不同的权重，方便我们添加样式代码。为了深入理解CSS优先级，我们通过一段示例代码进行分析。CSS样式代码如下：

p{ color:red;}           /*标签样式*/
.blue{ color:green;}     /*class样式*/
theader{ color:blue;}    /*id样式*/

CSS样式代码对应的HTML结构为：

<p class="blue" id="header">
    帮帮我，我到底显示什么颜色?
</p>

在上面的示例代码中，使用不同的选择器对同一个元素设置文本颜色，这时浏览器会根据CSS选择器的优先级规则解析CSS样式。为了便于判断元素的优先级，CSS为每一种基础选择器都分配了一个权重，我们可以通过虚拟数值的方式为这些基础选择器匹配权重。假设标签选择器具有权重为1.类选择器具有权重则为10，id选择器具有权重则为l00。这样id选择器“#header”就具有最大的优先级，因此文本显示为蓝色。

对于由多个基础选择器构成的复合选择器(并集选择器除外)，其权重可以理解为这些基础选择器权重的叠加。例如，下面的CSS代码。

p strong{color:black}            /*权重为：1+1*/
strong.blue{color:green;}        /*权重为：1+10*/
.father strong{color:yellow}     /*权重为：10+1*/
p.father strong{color:orange;}   /*权重为：1+10+1*/
p.father .blue{color:gold;}      /*权重为：1+10+10*/
theader strong{color:pink;}      /*权重为：100+1*/
#header strong.blue{color:red;}  /*权重为：100+1+10*/

对应的HTML结构为：

<p class="father" id="header">
    <strong class="blue">文本的颜色</strong>
</p>

这时，CsS代码中的“#header strong.blue”选择器的权重最高，文本颜色将显示为红色。此外，在考虑权重时，我们还需要注意一些特殊的情况。

(1)继承样式的权重为0

在嵌套结构中、h不管父元素样式的权重多大，被子元素继承时，它的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。例如，下面的CSS样式代码。

strong{color:red;}
#header{color:green;}

CSS样式代码对应的HTML结构如下：

<p id="header" class="blue">
  <strong>继承样式不如自己定义的权重大</strong>
</p>

在上面的代码中，虽然“#header”具有权重100，但被标签继承时权重为0。而“strong”选择器的权重虽然仅为1，但它大于继承样式的权重，所以页面中的文本显示为红色。

(2)行内样式优先

应用style属性的元素，其行内样式的权重非常高。换算为数值，我们可以理解为远大于100。因此行内样式拥有比上面提到的选择器都高的优先级。

(3)权重相同时，CSS的优先级遵循就近原则

也就是说，靠近元素的样式具有最大的优先级，或者说按照代码排列上下顺序，排在最下边的样式优先级最大。例如，下面为外部定义的CSS示例代码。

/*CSS文档,文件名为style_red.css*/
#header{color:red;}                     /*外部样式*/

对应的HTML结构代码如下：

<title>CSS优先级</title>
<link rel="stylesheet"href="style_red.css"type="text/css"/> /*引入外部
定义的CSS代码*/
<style type="text/css">
#header{color:gray;}
</style>
</head>
<body>
/*内嵌式样式*/
<p id="header">权重相同时，就近优先</p>
</body>

在上面的示例代码中，第2行代码通过外链式引入CSS样式，该样式设置文本样式显示为红色。第3~5行代码通过内嵌式引入CSS样式，该样式设置文本样式显示为灰色。

上面的页面被解析后，段落文本将显示为灰色，即内嵌式样式优先。这是因为内嵌样式比外链式样式更靠近HTML.元素。同样的道理，如果同时引用两个外部样式表，则排在下面的样式表具有较大的优先级。如果此时将内嵌样式更改为：

p{color:gray;}                   /*内嵌式样式*/

此时外链式的id选择器和嵌入式的标签选择器权重不同，“#header”的权重更高，文字将显示为外部样式定义的红色。

(4)CSS定义“limportant”命令，会被赋予最大的优先级

当CSS定义了“limportant”命令后，将不再考虑权重和位置关系，使用“limportant”的标签都具有最大优先级。例如，下面的示例代码。

#header{color:red!important;}

应用此样式的段落文本显示为红色，因为“limportant”命令的样式拥有最大的优先级。需要注意的是，“limportant”命令必须位于属性值和分号之间，否则无效。

复合选择器的权重为组成它的基础选择器权重的叠加，但是这种叠加并不是简单的数字之和。下面通过一个案例来具体说明，如例1所示。

例1 examplel1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器权重的叠加</title>
<style type="text/css">
.inner{text-decoration:line-through;}/*类选择器定义删除线，权重为10*/
div div div div div div div div div div div{text-decoration:underline;}
/*后代选择器定义下画线，权重为11个1的叠加*/
 </style>
</head>
<body>
<div>
  <div><div><div><div><div><div><div><div><div>
     <div class="inner">文本的样式</div>
  </div></div></div></div></div></div></div></div></div>
</div>
</body>
</html>

例1共使用了11对<div>标签，它们层层嵌套。第15行代码我们对最里层的<div>定义类名“inner”。第7、8行代码，使用类选择器和后代选择器分别定义最里层div的样式。此时浏览器中文本的样式到底如何显示呢?如果仅仅将基础选择器的权重相加，后代选择器(包含11层div)的权重为11，大于类选择器“.inner”的权重10，文本将添加下画线。

运行例1，效果如下所示。

在上图中，文本并没有像预期的那样添加下画线，而显示了类选择器“.inner”定义的删除线。可见，无论在外层添加多少个标签，复合选择器的权重无论为多少个<div>标签选择器的叠加，其权重都不会高于类选择器。同理，复合选择器的权重无论为多少个类选择器和标签选择器的叠加，其权重都不会高于i选择器。

在线咨询

上一篇：520条长辈生日用祝福语！值得收藏
下一篇：HTML5新年主题模板（附PSD下载）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

「前端架构师详解Css09」“类天猫双十二侧边栏”及

情提示：以下代码是我们邀请的前端架构师基于天猫门户编写的css相关代码，现在免费分享给大家，获取的方式为：

1. 此篇文章讲解目录：

2. 案例和相关知识点介绍

3. 此案例的代码实现

4. 此案例的知识点详解

大家好接下来我们会邀请前端架构师以连载的方式，并且结合阿里天猫商城的门户，系统讲解Css的专业知识，欢迎大家关注头条号“互联网IT信息”。

.CSS层叠性

2.CSS继承性

3.CSS优先级

1.CSS优先级

2.CSS特殊性

您的项目需求