CSS学习之二 选择器

1、元素选择器：往往是HTML元素，也可能是XML定义的元素，举例：

h1 {color:red;}/* 元素选择器 */
h2 {font:normal 12px/16px “Courier New”,Arial;}/* css关键字由空格隔开，只有font属性中字体大小和行高可用“/”分割 */
h3,p {background-color:#EEE;}/* 选择器的分组 */

2、通配选择器，它为页面中所有元素添加样式，就像是一个通配符，举例：

* {color:blue;}/* 通配选择器，等价于列出了文档中所有元素的color属性均为blue，它的优先级很低 */
*.p {font-weight:bold;}/* 类选择器，运用到所有类为p的元素上，可以忽略(*)号，等价于.p */

3、类选择器：多的不废话，说一下多类选择器吧，举例：
有如下HTML代码：

<p class=”p”>This is a paragraph</p><!– 类选择符 –>
<div class=”p”>This is a div element</div><!– 类选择符 –>
<p class=”urgent warning”>This is a paragraph</p><!– 多类选择符，一个class可以包含一个词列表，各个词之间用空格隔开 –>
<p class=”urgent warning help”>Those words’s background-color is red too in all browser!</p><!– 多类选择符，.waring.urgent选择器将不能匹配这里的p –>
<p class=” help ie6″>Those words’s background-color is red in browser ie6!</p><!– 多类选择符，由于help在选择器中最后出现，所以在IE6中背景为红色的 –>
<p class=”help”>Those words’s background-color is red in browser ie6!</p><!– 类选择符，由于help在选择器中最后出现，所以在IE6中背景为红色的 –>
<p>This is a paragraph<span class=”warning”> But this is a span element</span></p>

CSS风格如下：

p.p {font-style:italic;}/* 类选择器，选择段落且类为p时才显示粗体 */
.waring {font-weight:bold;}
.urgent {font-style:italic;}
.warning.urgent {background-color:silver;}/* 类选择器，选择同时包含waring和urgent两个类的元素，且出现的顺序可以和定义class时不同 */
p.warning.urgent.help {background-color:red;}/* 类选择器，选择同时包含waring,urgent和help三个类的p元素，但是在IE6中此选择符匹配class属性中包含help的所有p元素 */

在非IE6下面，CSS里如果有.warning.urgent.help这类的选择器，它只匹配同时包含waring,urgent和help三个类的HTML元素，而HTML中诸如class="urgent warning help"这类的选择器却可以匹配CSS中多种样式；而在IE6下却不同，这一点是很值得注意的。
4、ID选择器：比起类选择器来说，ID选择器不会那么复杂，ID属性不允许有以空格分隔的词列表，比如以下的写法是不对的：