CSS基础教程:群组化选择器

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

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享CSS基础教程:群组化选择器,希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发 】

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

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

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

 

(本文来源于图老师网站,更多请访问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; } 

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

 

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

 

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

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

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

延伸阅读
标签: Web开发
去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。 笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器。今天的笔记中包括44个选择器,基本涵盖了CSS 2...
标签: Web开发
我很久以前就开始计划着整理一下CSS选择器的浏览器支持,因为CSS3增加了很多非常有用的选择器。CSS属性选择器制作个性化链接样式作为对CSS选择器的初步研究。 kimblim网站整理了一份很全面的CSS选择器支持情况,我将其翻译过来并进行进一步的整理,将其尽可能的简化。同时结合evotech网站整理的CSS选择器支持列表,以及我自己平时总结的一...
标签: Web开发
前面一篇文章介绍了CSS页面布局中HTML结构化,本节讲解如何使用巧妙的使用CSS选择器。 id用于标识页面唯一元素,id的名称是控制某一内容块的手段,通过将某内容块置入div并赋予唯一的id,就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则,就可以完全...
标签: Web开发
当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child+html {} * html {} 只对IE 7 *:first-child+html {} 只对IE 7 和现代浏览器 htmlbody {} 只对现代浏览器(非IE 7) html/**/body {} 最新的Opera 9以下版本 html:first-child {} Safari html[xmlns*=&qu...
标签: Web开发
有三种方法应用CSS 一、In-line 行内 行内样式是在html标签里直接使用style属性  p style="color: red"text/p 设定段落文字红色。 但要记住,最后的HTML应该是独立出来,使用表现文档,所以行内样式应该在任何地方避免。 二、Internal 内部 使用于整个页面的植入内部样式在head标签里面,styl...

经验教程

962

收藏

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