CSS选择符小讲
作者:飘零雾雨 来源:css探索之旅 发布时间:2009-09-17 11:53:00
成天都要与样式打交道的朋友,相信对CSS选择符(CSS Selectors)都不会陌生。不过对于刚接触或者还不是很熟悉css的朋友来说,能够找到一份对于CSS选择符的相关例子集合,还是会有一定帮助的。
虽然之前已经有不少对于CSS选择符的文章在网络上出现,不过我还是准备以自己的方式来写一写,这也是一种获得乐趣的途径。所以我小小的总结了一下css1及css2选择符(本文的CSS选择符都为css1及css2)的用法及实例,希望对大家有些许帮助。
做这之前,当然得将所有CSS选择符列出来先。
CSS选择符(CSS Selectors - CSS1 and CSS2)
类型选择符(Type Selectors) CSS1
包含选择符(Descendant Selectors) CSS1
ID选择符(ID Selectors) CSS1
类选择符(Class Selectors) CSS1
分组选择符(Grouping Selectors) CSS1
通配选择符(Universal Selectors) CSS2
子选择符(Child Selectors) CSS2
相邻选择符(Adjacent Selectors) CSS2
属性选择符(Attribute Selectors)
E1[attr] CSS2
E1[attr=value] CSS2
E1[attr~=value] CSS2
E1[attr|=value] CSS2
伪类选择符(CSS Pseudo-Classes Reference)
:link CSS1
:visited CSS1
:hover CSS1
:active CSS1
:focus CSS2
:first-child CSS2
:first CSS2
:left CSS2
:right CSS2
:lang CSS2
伪对象选择符(CSS Pseudo-Elements Reference)
:first-letter CSS2
:first-line CSS2
:before CSS2
:after CSS2
现在已经将所有的CSS选择符都列举出来了,将就对每个选择符做单独的解释和举例。对于以下的这些例子,有些只是简单的应用实例,有些还提供了对比例子,使得可以明显的看出该种选择符的使用范围和方法。
类型选择符(Type Selectors)
语法:E1
说明:有的时候我们也将它叫做标签选择符,因为它是直接用html标记来做选择符进行操作。目前所有主流浏览器均支持该选择符,属于CSS1选择符。
实例:
div{color:#F00;}
<div>这里是测试内容</div>
包含选择符(Descendant Selectors)
语法:E1 E2
说明:选择所有被E1包含的E2,这里的E1和E2即可以是html标记,也可以是class或id。目前所有主流浏览器均支持该选择符,属于CSS1选择符。
实例:
div em{color:#F00;}
.test em{color:#F00;}
<div>这里是<em>测试</em>内容</div>
<div class="test">这里是<em>测试</em>内容</div>
ID选择符(ID Selectors)
语法:#sID
说明:以DOM中作为对象的唯一标识符的ID作为选择符。目前所有主流浏览器均支持该选择符,属于CSS1选择符。
实例:
#test{color:#F00;}
<div id="test">这里是测试内容</div>
类选择符(Class Selectors)
语法:.className
说明:其效果等同于E1[class~=className]。可以为对象的class属性指定多于一个值(className),其方法是用空格将每个className隔开。目前所有主流浏览器均支持该选择符,属于CSS1选择符。
实例:
.test{color:#F00;}
.test2{font-size:14px;}
<div id="test">这里是测试内容</div>
<div id="test test2">这里是测试内容</div>
分组选择符(Grouping Selectors)
语法:E1,E2,E3
说明:将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组。目前所有主流浏览器均支持该选择符,属于CSS1选择符。
实例:
.test,p{color:#F00;}
<div id="test">这里是测试内容</div>
<p>这里是测试内容</p>
通配选择符(Universal Selectors)
语法:*
说明:选定DOM中的所有对象。目前所有主流浏览器均支持该选择符,属于CSS2选择符。
实例:
*{color:#F00;}
<div>这里是测试内容</div>
<p>这里是测试内容</p>
子选择符(Child Selectors)
语法:E1 > E2
说明:选择所有作为E1子对象的E2,不包括孙辈和更深的关系。非IE内核浏览器和IE7及以上浏览器支持,属于CSS2选择符。
实例:
.test > strong{color:#F00;}
<div class="test">
<strong>测试的内容</strong>
<p>这是<strong>测试的内容</strong>哦!</p>
<strong>测试的内容</strong>
</div>
猜你喜欢
- 广州4.18书友会主题的内容提纲自己参与撰写,同时还参与组织和主持。通过这次的深入参与,我发现胡晓同学能坚持下来多不容易,先赞下。由于天公不
- <!--#include file="Include/Conn.asp"--><%If(Request
- 首先在我们进行信息系统的开发的时候,数据库的应用必不可少,对于一个企业级别的数据库应用很少是只使用一块磁盘的,很多都是使用RAID磁盘阵列,
- 在浏览器 IE6 、IE7、Firefox2+、Firefpx3+、Opera9.6+、Safari3.1+中测试以下代码:<!DOC
- 内容摘要:一般情况下,如果我们想了解股市行情,必须登录专业股票网站,输入公司代码才能看到具体股价。其实,利用XMLHTTP协议,我们每个人都
- 我很想自己写一个这样的程序,不过wordpress是php的,我blog是ASP的,只好用ASP写代码了。经过一番折腾测试,终于让我的梦想变
- XML是一个精简的SGML,它将SGML的丰富功能与HTML的易用性结合到Web的应用中。XML保留了SGML的可扩展功能,这使XML从根本
- 代码如下所示:表landundertake结构如下所示:表appraiser结构如下所示:access代码:代码如下:TRANSFORM F
- 使用MySQL,目前你可以在三种基本数据库表格式间选择。当你创建一张表时,你可以告诉MySQL它应该对于表使用哪个表类型。MySQL将总是创
- Web Forms 2.0 是一个很有意思的东东,是 HTML 5 的组成部分。它的目标是提升表单的使用性 (usability),基本上就
- CacheControl 属性设置是否可缓存由 ASP 生成的输出。默认地,代理服务器不会保持缓存副本。语法:response.CacheC
- 呵,以前也没考虑过这方面的东西,现在写的代码越来越多,越来越复杂,如果再不把不用的变量及时释放掉,到时肯定会出问题。今天无意中在无忧Q群里看
- 在sql语句中,如果查找某个文本字段值为空的可以用select * from 表 where 字段=''但是如果
- a {}{ background:url(images/normal.gif); } a:ho
- 做设计类网址导航的初衷是为了资源整合,也是在尝试解决问题。假定访问用户都是行业人士,或者目地性很强的有一定了解的用户,应该如何考虑这个组织系
- 网络上有很多个性化的404页面,但是404页面不仅仅是个性化展示,404页面本来目的是:告诉浏览者其所请求的页面不存在或链接错误,同时引导用
- 标志是一种简单的工具,就象铁锤,简单实用。如果一种工具功能太多导致其效用减弱,那就让它保持简单。你并不需要一把有太多装饰的精美铁锤。对于象征
- 描述的意思是HTML为中心的前端开发也差不多是web标准的意思。1.HTML是基础2.CSS依靠选择符提供视觉;3.Javascript 依
- 在蓝色看到的几个js日历代码,整理了一下。大家可以用在blog上,或者可以用在表单的日期类型的数据选择中,方便大家填写日期。1.动感的日历,
- 在html 5增加了新元素header、footer,测试过发现IE不能解析html 5新增的元素。代码如下:<!DOCTYPE&nb