基本选择器是使用最频繁,最基础,最早定义的选择器。IE,火狐,Chrome,Safari,Opera均兼容。主要包括如表3-1所示几种类型基本选择器。
表3-1 基本选择器
备注: "CSS"列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)
1.CSS 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 HTML的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。
2. CSS的id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:
下面的 HTML 代码中,id 属性为 red的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。
3. CSS 类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作。为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。请看下面的 HTML 代码:
在上面的代码中,两个元素的 class 都指定为 important:第一个标题( h1 元素),第二个段落(p 元素)。然后我们使用以下语法向这些归类的元素应用样式,即类名前有一个点号(.)。
4. 分组选择器
假设希望 h2 元素和段落都有灰色。为达到这个目的,最容易的做法是使用以下声明:
将 h2 和 p 选择器放在规则左边,然后用逗号分隔,就定义了一个规则。其右边的样式(color:gray;)将应用到这两个选择器所引用的元素。逗号告诉浏览器,规则中包含两个不同的选择器。可以将任意多个选择器分组在一起,对此没有任何限制。例如,如果您想把很多元素显示为灰色,可以使用类似如下的规则:
5. CSS *选择器
选择所有元素,并设置它们的背景色: