CSS选择器

 

      CSS通过内联样式、内部样式表、外部样式表去控制页面，就可以实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。

CSS选择器共有三种：标签选择器、ID选择器、类选择器。

1）标签选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，在style.css文件中对p标签样式的声明如下：

p{

font-size:12px;

background:#900;

color:090;

}

页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以了，就这么容易！

2）ID选择器

ID选择器在某一个HTML页面中只能使用一次， ID选择器更具有针对性，如：先给某个HTML页面中的某个p标签起个ID，代码如下：

<p id="one">此处为p标签内的文字</p>

CSS中定义ID为one的p标签的属性，就需要用到#，代码如下：

#one{

font-size:12px;

background:#900;

color:090;

}

这样页面中的某个p就会是CSS中定义的样式。

3）类选择器

这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式，和ID选择器的用法类似，只不过把id换做class，如下：

<p class="one">此处为p标签内的文字</p>

如果还想让div标签也有相同的样式，怎么办呢？加上同样的class就可以了，如下：

<div class="one">此处为p标签内的文字</div>

这样页面中凡是加上class="one"的标签，样式都是一样的。

CSS定义的时候和ID选择器差不多，只不过把#换成.，如下：

.one{

font-size:12px;

background:#900;

color:090;

}

一个标签可以有多个类选择器的值，不同的值用空格分开，如：

<div class="one yellow leftStyle">此处为p标签内的文字</div>

这样可以将多个样式用到同一个标签中，当然也可以，ID和class一块用，如下：

<div id="div1" class="one yellow leftStyle">此处为p标签内的文字</div>

4）选择器的集体声明

在使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式

属性，可以将这些标签集体声明，不同的标签用“,”分开，比如：

h1,h2,h3,h4,h5,h6{color:#900;}复制内容到剪贴板代码:

#one,#three,.yellow{font-size:14px;}

 

相同的部分共同定义，不同的部分单独定义，保证风格统一，样式修改灵活。

5）选择器的嵌套

选择器也是可以嵌套的，如：

#div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/

这样做的好处就是不需要在单独的为ID为div1的标签内的p标签内的a标签单独定义class选择器或者ID选择器。