首页 > 技术文章 > (004)CSS选择符(selector)

jplatformx 2015-04-16 11:06 原文

一、引言

  选择符,顾名思义,用于从XHTML文档中选择元素。选择符有很多种,各有其不同的具体性,可以确定一大批元素或仅仅少数几个元素。具体性是度量选择符的作用范围的手段。所谓作用范围,换句话说,指的是选择符选择了多少元素。在CSS的设计原则中,比较具体的选择符将凌驾于较不具体的选择符之上并取而代之。具体性是CSS中较为含糊和难以掌握的概念之一,但也是这种语言中最强大的特性之一。

 

二、全体选择符

  全体选择符是一个星号(*)。它充当一个“通配符(wild card)”,选择文档中的每一个元素。

 

三、元素选择符

  元素选择符选择一种元素的所有实例,其具体性来自于标签名。这种选择符比全体选择符更具体,但还不是很具体,因为其目标是一种元素的每一个实例,无论它们到底有多少个。例如,下这一规则将每一个em元素的前景色都指定为红色,哪怕文档中有数以千计的这种元素。元素选择符又称为类型选择符。

em {
    color: red;
}

 

四、类选择符

  类选择符以class属性中有指定类名的任何元素为目标。因为class属性几乎可以用于任何XHTML中的任何元素,而且可以有任意数目的元素属于同一个类,所以这种选择符并不是特别具体,但还是比元素选择符更具体。在css中,类选择符以一个圆点(.)开头。例如,下列规则将影响所有属于“.info”类的元素的样式,不管它们是什么元素。

.info {
    color: red
}

 

五、ID选择符

  ID选择符将仅仅选择具有指定标识符的那个元素。实际上,id属性可用于几乎所有元素,但一个id属性值在一个文档中只能使用一次。ID选择符在一个页面中只以一个元素为目标,这使它比可能以许多元素为目标的类选择符具体得多。ID选择符以一个“#”符号开头。如下例:

#info {
    color: red;
}

 

六、伪类选择符

  伪类选择符类似于类选择符(其具体性也与类选择符相同),但它选择的是处于特定状态的元素。这种选择符以冒号(:)开头。可用的伪类只有有限几个:

:link { color: blue; }
:visited { color: purple; }
:active { color: red; }
:hover { color: green; }
:focus { color: orange; }

  :link伪类选择所有超链接元素。:visited伪类选择那些所指向的目标已经被访问过的链接(已访问过的链接被记录于web浏览器内在的访问历史记录中)。:active伪类选择处于活动状态的链接。所谓处于活动状态,指的是在被激活期间(当用鼠标点击链接时,或当焦点位于链接上并按下回车键时)。:hover伪类选择用户的定点设备“悬浮”于其上方的元素。虽然任何元素都能处于有定点设备悬浮其上的状态,但是这一伪类最常用于链接(不过,某些老式浏览器只支持把这一伪类用于链接而不是其他元素)。:focus伪类选择拥有焦点的元素。某些浏览器不支持:focus,特别是window下的IE 6。但是,IE实际上(不正确地)将:active伪类当做:focus伪类对待,不过这仅针对链接,不适用于其他元素。

 

七、后代选择符 

  后代选择符是CSS的武器库中最有用和最强大的选择符之一。它可以组装自两个或多个用空格分隔的基本类型的选择符(全体、元素、类、伪类和ID选择符),用于选择文档树中匹配该位置的元素。这种选择符也被称为上下文选择符,因为它们是基于元素在文档中的上下文来选择它们。例如:

#introduction em { color: yellow; }

  这一规则将把id值为“introduction”的元素中包含的任何em元素的颜色设置为黄色。基于xhtml文档的结构,后代选择符可以很精确地只选择到你想要选择的元素。可以看看下面这个更复杂的例子:

#introduction .info p *    {
    color: pink;    
}

  从上面这个例子可以看出,后代选择符的作用范围可能会非常窄,仅仅针对满足选择符的选择标准的那几个元素。

 

八、组合选择符

  可以把两种或多种类型的选择符组合使用,如一个元素选择符加一个ID选择符,或者一个ID选择符加一个类选择符。这些组合能够进一步增强选择符的具体性,仅仅挑出那些你想应用样式的元素,而将所有其他元素排除在外。看看下面的规则:

p.info { color: blue; }

  后代选择符中的组合选择符对元素的选择能达到外科手术般的精确:

p#introduction a.info:hover {color: silver;}

  

九、分组选择符

  可以把几个选择符聚集起来作为一条规则的组成部分,以便同一套样式声明集能够应用到许多元素上,这可以避免对这些选择符重复同一套样式声明。规则中的各个选择符之间用逗号分隔:

p, h1, h2 { color: blue; }

  分组选择符和组合选择符是保证样式表的简洁性和可管理性的有力手段。

 

十、小节

  目前为止,我们这里介绍的css选择符都是属于CSS 1的内容。CSS 1是CSS的第一个标准化版本,早在1996年就已经推出了。如今这一代的图形化Web浏览器对CSS的这个版本支持的很好,因此你可以放心使用所有这些选择符;大多数访问者都会看到他们期望的结果。

 

推荐阅读