CSS基础语法:群组化选择符

2016-02-20 00:29 6 1 收藏

下面图老师小编要向大家介绍下CSS基础语法:群组化选择符,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

常常我们的CSS 样式中会有好几个地方需要使用到相同的设定时,一个一个分开写会是一件满累人的工作,重覆性太高且显得冗长,更不好管理....在CSS 语法的基本设定中,就可以把这几个相同设定的选择器合并在一起,原本可能是写了7~8 行相同的语法,合在一起后就只要短短的一小行,怎么看都让人心旷神怡啊~

例如:当有好几个选择器刚好都需要把文字的颜色设定为灰色的时候,一个一个分开写的方法式,感觉就很繁琐,如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)h1 { color:#666666; }h2 { color:#666666; }h3 { color:#666666; }h4 { color:#666666; }ul { color:#666666; }p { color:#666666; }#AAA { color:#666666; }#BBB { color:#666666; } 

群组化:把这几个选择器使用逗号合并在一起,就只要短短的一小行,如下:

h1, h2, h3, h4, ul, p, #AAA, #BBB { color:#666666; }

使用「群组化」选择器 可以使我们的CSS 样式变得比较简洁,将来又好管理和方便修改,这种写法是CSS 语法最基础的功能之一,只要把这一些基础的用法都熟悉了,同学们自然而然就可以练出漂亮的CSS 样式喽~

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160220/1631928.html

延伸阅读
E:hover伪类选择符,是我们最熟悉不过的一个伪类了,而且运用也是非常的广泛,可以说在互联网中每个网站上面都会出现它的影子。我们不可否认已经对这个伪类选择符已经是相当的熟悉,但你是否真正的将它的功能发挥到淋漓尽致呢?嘿嘿只要善于发现,我们就可以创造出非常有意思的东西来,大家是否还记得之前的分享给大家的一篇文章《创意CSS技巧...
在学习中遇到问题可以到 论坛 发贴交流! 本例为CSS入门系列教程,在这一课中我们将学习CSS的语法基础,主要学习CSS的基本语法、选择符组、类选择符、ID选择符、包含选择符、 样式表的层叠性以及,希望能给对网页制作感兴趣的朋友带来帮助~~ CSS入门教程之语法基础 1. 基本语法 CSS的定义是由三个部分构成:选择符(selector),属...
标签: Web开发
坦率的说,我写CSS时,有至少1/4的时间是在纠结选择符该如何命名。随意的命名,会让你陷入尴尬。 举个例子,我们需要在一段文字里将某些词标红。所以为此建了一个.red { color: red; }。结果产品经理觉得,红色太刺眼了,改成橘色比较好吧。这下头大啦,难道写成.red { color: orange; }么...
标签: Web开发
规范的命名也是Web标准中的重要一项,标准的命名可以更好的看懂代码,我想大家应该都有这种经历,某日翻出自己过去写的代码居然看不懂了,呵呵,为了避免这种情况我们就要规范化命名,再说了,现在一个项目不是一个人就可以完成的,是需要大家互相合作的,如果没有规范化命名,别人就无法看懂你的代码,大大降低了工作效率,所以必须规范化...
标签: Web开发
说说nth-child(an+b)。 nth-child()这个东西,是CSS3中的一个伪类选择符,jQuery也拿来用了。 国内翻译教材《jQuery基础教程》中有一句这样的翻译“......因此CSS选择符$('div:nth-child(1)')取得的是作为其父元素第1个子元素的所有div。”初读此句,总觉得不易理解,于是便有了google的冲动(在这里要强烈BS一下教育...

经验教程

38

收藏

15

精华推荐

CSS语法

CSS语法

蜗居回收

jQuery入门第一课 jQuery选择符

jQuery入门第一课 jQuery选择符

关键我事你哥

CSS 高级语法

CSS 高级语法

想懂就问我

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部