常用的选择器
最常用的选择器类型是类型选择器和后代选择器。类型选择器用来寻找特定类型的元素,比如段落或标题元素,只需指定希望应用样式的元素的名称。类型选择器有时候也称为元素选择器或简单选择器。
- p {color: black;}
- h1 {font-weight: bold;}
后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其他两个选择器之间的空格表示。在这个示例中,只缩进是块引用的后代的段落元素,其他所有段落不受影响。
- blockquote p {padding-left: 2em;}
这两种选择器适合于应用那些应用范围广的一般性样式。要想寻找更特定的元素,可以使用ID选择器和类选择器。顾名思义,这两种选择器用于寻找那些具有指定ID或类名的元素。ID选择器由一个#字符表示,类选择器由一个点号表示。下面示例中的第一条规则使简介段落中的文本以粗体显示,第二条规则让日期显示为绿色:
- #intro {font-weight: bold;}
- .date-posted {color: #ccc;}
- <p id="intro">Happy Birthday Andy</p>
- <p class="date-posted">24/3/2009</p>
前面提到过,许多CSS开发人员过度依赖类选择器和ID选择器。如果他们希望以一种方式对主内容区域中的标题应用样式,而在第二个内容区域中采用另一种方式,那么他们很可能创建两个类并且在每个标题上应用一个类。一种简单得多的方法是结合使用类型、后代、ID和类这几种选择器:
- #main-content h2 {font-size: 1.8em;}
- #secondaryContent h2 {font-size: 1.2em;}
- <div id="main-content">
- <h2>Articles</h2>
- ...
- </div>
- <div id="secondary-content">
- <h2>Latest news</h2>
- ...
- </div>
这是一个非常简单明朗的示例。但是,让你吃惊的是,只使用前面讨论的4种选择器就可以成功地找到许多元素。如果你发现自己在文档中添加了许多不必要的类,那么这可能是文档结构不合理的一个警告信号。这时应该分析这些元素之间的差异。你常常会发现唯一的差异是它们在页面上出现的位置。不要给这些元素指定不同的类,而应将一个类或ID应用于它们的祖先,然后使用后代选择器定位它们。
伪类
有时候,我们需要根据文档结构之外的其他条件对元素应用样式,例如表单元素或链接的状态。这要使用伪类选择器来完成。
- /* makes all unvisited links blue */
- a:link {color:blue;}
- /* makes all visited links green */
- a:visited {color:green;}
- /* makes links red when hovered or activated.
- focus is added for keyboard support */
- a:hover, a:focus, a:active {color:red;}
- /* makes table rows red when hovered over */
- tr:hover {background-color: red;}
- /* makes input elements yellow when focus is applied */
- input:focus {background-color:yellow;}
:link和:visited称为链接伪类,只能应用于锚元素。:hover、:active和:focus称为动态伪类,理论上可以应用于任何元素。大多数浏览器都支持这个功能。但是,IE 6只注意应用于锚链接的:active和:hover选择器,完全忽略:focus。IE 7在任何元素上都支持:hover,但是忽略:active和:focus。
最后,值得指出的是:通过把伪类连接在一起,可以创建更复杂的行为,比如在已访问链接和未访问链接上实现不同的鼠标悬停效果。
- /* makes all visited linkes olive on hover */
- a:visited:hover {color:olive;}