CSS选择器

基本规则

每CSS规则由两部分组成：选择器和声明块，声明由一个或多个声明组成，每个声明是一个属性－值对.

1.元素选择器

元素是最基本的选择器, h1，p，a都可以直接做为选择器，甚至是html本身.

 h1{color:#66CCFF;}
 h2{color:silver;}
 p{font-size:20px;color:#cccccc;}

一个选择器可以有多个声明，声明之间用分号隔开；一个属性也可以有多个值，中间用空格隔开.给h1加上边框，边框颜色会灰色，边框样式为实线，可以这样写：

border:1px solid #cccccc;

选择器分组：如果想同时把不同元素设置相同对样式，可以使用分组同时使用, 选择器之间用逗号隔开。比如需要把h1 和p都设置为字体颜色为红色：

h1,p{color:red;}

2. 通配选择器

通配选择器用一个星号(*)表示，这个选择器可以和任何元素匹配。例如，要把一个文档中所有的元素颜色都设置成银色，可以这样写：

*{color:silver;}

3. ID选择器

使用元素选择器会把一个文档中所有都元素都设置为同一样式，以h1{color：red;} 为例，会把所有的h1标签设置为红色，如果只想对一个特定的h1设置样式，可以通过设置id的方式定义规则.

<p id="p1">test1</p>
<p id="p2">test2</p>

只对第二个p标签设置样式：

#p2{color:silver;}

4.类选择器

通过给元素设置标记，同一类的元素可以有相同多样式.
下面的h1和p元素属于同一类，类名为cal.

   <h1 class="cla">Hello World</h1>
   <h2>safe information</h2>
   <p class="cla">Where there is a will,there is a way</p>

设置CSS样式：

.cal{color:color:#FF8000;}/*h1和p具有相同的颜色*/

也可以单独设置：

p.cal{ color:yellow;}/*对h1没有作用*/

• 多类选择器
  下面对html代码中有2个p标签，第一个p标签有两个类标记，第二个p标签有一个类标记.

<p class="urgent warning"> When handling plutoium,care must be taken to ...</p>
<p> With plutoium,<span class="warning">The possibility...</span></p>

我们将类名为waring的标签字体颜色设为红色，类名为urgent的标签字体颜色设为绿色，那么类名为warning和urgent的标签应该是什么？

.warning{color:red;}
.urgent{color:green;}

这种情况只保留写在后面的类的属性，写在前面的会被覆盖掉. 对于多类名的也可以通过下面的方式设置：

.urgent.warning{background-color:blue;}