下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

CSS 选择器的分组和继承的相关介绍

作者:课课家教育     来源: http://www.kokojia.com点击数:589发布时间: 2016-09-25 14:00:11

标签: CSS分组CSS语法CSS继承

Web开发

       为了更好地优化我们css代码的写法,当我们熟练掌握了基础语法后,就可以进行相对复杂一点的语法学习了。这里小编将向大家简单介绍一下CSS选择器的分组和继承的相关问题。

CSS

       一、选择器分组

  我们在书写代码时,如果我们想共用一个声明,可以通过对选择器进行分组来实现。这里我们要注意:不同组的选择器之间需要用逗号进行分隔。下面我们以标题元素为例进行分组,把所有标题元素都定义为红色。

代码

      二、继承的相关问题

      1.什么是继承

  继承就是指在不需要再次编写相同代码的前提下可以使子类元素具有父类元素的所有属性。请看看下面这条规则:

继承代码

  上面这条规则的意思是站点的body元素下的所有字元素都显示Verdana字体(前提是该字体存在访问者的系统中)。即最高级元素(body)的全部属性,在不使用其他的规则的情况下,全部被诸如p,td,ul,ol等等的子元素继承。令所有body子元素的字体显示为Verdana字体。同理,子元素的子元素也一样。

      2.友善地对待Netscape4

  子元素的继承在当今的大部分浏览器都是支持的,但古老的Netscape4就是一个例外,它不仅忽略了继承,也忽略了应用于body元素的规则。同样,IE/Windows直到IE6也存在相关的问题,例如:表格内的样式会被忽略,我们该怎么办呢?

       幸运的是,我们可以通过称为"BeKindtoNetscape4"的冗余法则来解决问题。代码如下:

Netscape4代码

  通过这组代码,Netscape4浏览器就能理解这组选择器,达到我们的效果了。

  3.继承是一种可怕的约束吗?

  子类元素在继承父类元素的同时,能否可以重新定义某些属性或者获得父类元素不同的功能?答案是可以的。例如,你可能不希望"Verdana,sans-serif"字体被所有的子元素继承,而希望段落的字体改为Times。对此,我们可以增加一个针对p的特殊规则,使它摆脱父元素的规则,具体代码如下:

在父元素的基础上增加功能代码

  分组和继承属于基础的技巧内容,它们都是有效减少不必要的重复代码的重要手法,也是实现CSS文件优化的第一步。相信大部分初学者,特别是从内联样式开始上手的朋友们,都不难从本教程中获得一个提升和飞跃,减小文件体积的同时,也提高了CSS的可读性。

赞(0)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程