CSS高级特性 层叠行和继承性

鳄鱼君Ba

发表文章数:514

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS和CSS3教程 » CSS高级特性 层叠行和继承性

CSS是层叠样式表的简称,层叠性和继承性是其基本特征。对于网页设计师来说,应该深刻理解和应用这两个特性。

CSS的层叠性和继承性

所谓层叠性是指多种CSS样式的叠加。我们呢来通过一个简单的列子:

p { color:red; font-weight:blod; }
#ppoo { padding: 10px 10px; }
.space { margin:10px 10px;  }

<p class="space" id="ppoo"> p标签就是层叠性</p>
<p>这是一个正常的P标签</p>

所谓继承性是指书写CSS样式表时,子标记会继承父标记的某些样式,如文本颜色和字号。就像我们定义body标签的color为red,网页中所有的文本样式都会继承body的color:red。

继承性非常有用,他使我们不用再元素的每个后代上都添加相同的样式,如果设置的属性是一个可继承的属性,只需要将他定义为父元素即可!例如:pmdiv,h1,h2,ul,ol,li{color:red;}可以写为body{color:red;}。

恰当的使用继承则会大大减少代码量和复杂性,但是也是会出现问题的,为了减少问题的出现,我们做了统一的规定:字体、字号、颜色、行距等可以再body元素中统一设置,然后通过继承影响文档中所有文本。

并不是所有的CSS属性都可以继承,下面的属性就不具有继承性:

  • 边框属性
  • 内、外边距属性
  • 背景属性
  • 定位属性
  • 布局属性
  • 元素宽高属性

需要注意标题标h1~h6有默认字号样式,会覆盖继承的字号样式,在设置的时候可能有疑惑,为什么标题不继承body的样式呢?

CSS的优先级

多个样式规则应用在网页上就会出现优先级的问题,我们来通过列子说明:

p {color:red;}
.ppoo {color:blue;}
#header { color:yellow;}

<p id="header" class="ppoo"> 我tm到底是什么颜色好呢!</p>

我们使用不同的选择器作用于同一个标签上,这时浏览器会根据优先级解释CSS样式。CSS为每一种基础选择器都分配了一个权重,其中,标记(标签)选择器具有权重1、类选择器具有权重10、id选择器具有权重100,这样id选择器#header就具有最大的优先级,话说鳄鱼君的网站有这样的权重该多好呐!呃呃,所以说文本会显示为黄色。呢我们呢接着往下看:

<p class="ppoo" id="header">
    <strong class="oopp"> 我到底是什么sher</strong>
</p>

这样就需要对权重值进行计算叠加:

p strong{color:red;}   /*权重为 1+1*/
strong.oopp{color:#fff;}   /*权重为 1+10*/
.ppoo strong{color:blue;}   /*权重为 10+1 */
p.ppoo strong{color:yellow;}  /*权重为 1+10+1*/
#header strong{color:black;}  /*权重为 100+1*/

但是下面的这种情况就不一样了:

strong{color:red;}
#header{color:blue;}
<p id="header" class="ppoo">
    <strong>继承样式不如自己定义</strong>
</p>

虽然header具有权重100,但是被strong继承时权重为0,strong的权重值虽然为1,但是大于继承时的权重,所以会显示红色red。

行内样式优先。应用style属性的元素,其行内样式的权重非常高。可以理解为远大于100.总之,他拥有比前面提到的所有的选择器都大的优先级。
权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
CSS定义了一个! important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的愿景,只要使用了! important,他就是老大!
! important必须位于属性值和分号之间,否则无效

复合选择器的权重为组层他的基础选择器权重的叠加,但是这种叠加不是简单的数字之和,我们来看一个案例:

.ppoo{ text-decoration:line-through;}   /*类选择器定义删除线,权重为10 */
div div div div div div{text-decoration:underline;}      /*后代选择器定义下划线,权重11 省略*/

<div><div><div><div><div><div>
    <div class="ppoo"> 文本的样式是什么</div>
</div></div></div></div></div></div>

我省略了div标签,总之div标签是11个,权重大于ppoo的权重,但是结果并不是我们呢预期的呢样显示下划线,而显示类选择器ppoo定义的删除线,即类选择器的权重大于后代选择器11叠加的div。无论在外层添加多少个div标记,即复合选择器的权重无论多少个标记选择器的叠加,其权重都不会高于类选择器。同理符合选择器的权重无论为多少个类选择器和标记选择器的叠加,其权重都不会高于id选择器

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《CSS高级特性 层叠行和继承性》 发布于2020-04-21

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

2 + 6 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册