您现在的位置:学赛首页 > 新手教程 > HTML&CSS > 正文
精通CSS:常用的选择器
http://www.educity.cn 作者:《精通CSS:高级Web标准解决方案》 来源:希赛网 2007年9月11日 发表评论 进入社区
《精通CSS:高级Web标准解决方案》 章节连载 >>>

    1.2  为样式找到目标

    有效且结构良好的文档为应用样式提供了一个框架。要想使用CSS将样式应用于特定的(X)HTML元素,需要有办法找到这个元素。在CSS中,执行这一任务的样式规则部分称为选择器(selector)。

1.2.1  常用的选择器

    最常用的选择器类型是类型选择器和后代选择器。类型选择器用来寻找特定类型的元素,比如段落、锚或标题元素,只需指定希望应用样式的元素的名称。类型选择器有时候也称为元素选择器或简单选择器。

    

    后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其他两个选择器之间的空格表示。在下面的示例中,只在作为列表项的后代的锚元素上应用样式,而段落中的锚不受影响。

    

    这两种选择器适合于应用那些应用范围广的一般性样式。要想寻找更特定的元素,可以使用ID选择器和类选择器。顾名思义,这两种选择器用于寻找那些具有指定ID或类名的元素。ID选择器由一个#字符表示,类选择器由一个点号表示。下面示例中的第一条规则使简介段落中的文本以粗体显示,第二条规则让日期显示为绿色:

    

    正如前面提到的,许多CSS开发人员过度依赖类选择器和ID选择器(虽然后者的程度较轻)。如果他们希望以一种方式对主内容区域中的标题应用样式,而在第二个内容区域中采用另一种方式,那么他们很可能创建两个类并且在每个标题上应用一个类。一种简单得多的方法是使用类型、后代、ID和(或)类几种选择器的组合:

    

    这是一个非常简单的示例。但是,只使用前面讨论的四种选择器就可以成功地找到许多元素。如果你发现自己在文档中添加了许多不必要的类,那么这可能是文档结构不合理的一个警告信号。这时应该分析这些元素之间的差异。你常常会发现惟一的差异是它们在页面上出现的位置。不要给这些元素指定不同的类,而是将一个类或ID应用于它们的祖先,然后使用后代选择器定位它们。

    伪类

    有时候,希望根据文档结构之外的其他条件对元素应用样式,例如表单元素或链接的状态。这要使用伪类选择器来完成。

    

    

    :link和:visited称为链接伪类,只能应用于锚元素。:hover、:active和:focus称为动态伪类,理论上可以应用于任何元素。不幸的是,只有少数现代浏览器(比如Firefox)支持这种功能。IE 6和更低版本只注意应用于锚链接的:active和:hover选择器,完全忽略:focus。

购买《精通CSS:高级Web标准解决方案》http://shop.csai.cn/itbook/itbookinfo.asp?lbbh=10014414