CSS选择器

传统HTML网页设计往往是内容和表现混合，随着网站规模不断扩大，无论是修改网页还是维护网站都显得越来越困难。CSS的诞生为网页注入了新鲜血液，它提供了丰富的样式手段，对页面布局等的控制也更加精确，同时能够实现内容和表现的分离，使得网站的设计风格趋向统一、维护更加容易，并且能够被多种浏览器支持。

一、CSS的基本语法

CSS是一个包含一个或多个规则的文本文件。CSS规则由两个主要的部分构成：选择器（Selector，也称“选择符”）和声明(Declaration)。

选择器通常是需要改变样式的HTML元素。

声明由一个或多个属性名称与属性值对组成。属性名称是CSS的关键字，如font-family（字体）、color（颜色）和border（边框）等。属性名称用于指定选择器某一方面的特征，而属性值则基本用于指定选择器的特性的具体特征。其基本语法如下：

selector{PRoperty1：valuue1；property2：valuue2；property3：valuue3；……}

选择器{属性1：属性值1；属性2：属性值2；属性3:属性值3；……}

二、CSS选择器类型

CSS选择器主要有4种类型：标记选择器、类选择器、id选择器及伪类选择器。

1、标记选择器

标记选择器（也可称为”元素选择器）即直接使用HTML标记名作为选择器，它定义的样式作用于页面中所有与选择器同名的标记。例如：

P{background-color:red;font-size:20px;color:green}

p是段落元素，该CSS规则将HTML中所有段落统一设置成”背景色为红色、字体大小为20像素以及字体颜色为绿色“。

2、类选择器

任何合法的HTML标记都可以使用class属性，class属性用于定义页面上的HTML元素标记组，这些标记组通常具有相同的功能或作用，因此它们可以设置相同的样式规则。类选择器由点号”.“及类名直接相连构成。例如：

.c2{background-color:red;font-size:20px;color:green}

<p class="c2">使用class属性设置段落样式</p>

p是段落元素选择器，在P中应用了class=”c2“这个选择器后，该段落中的文字会被设置成”背景色为红色、字体大小为20像素以及字体颜色为绿色“。

3、id选择器

HTML标记的id属性与class属性类似，可以用于各类标记中，也可以作为css选择器来使用。区别在于，同一id属性值在同一页面上只能出现一次，而同一class属性值可以在同一页面中多次出现。id选择器由井号”#“和id属性值相连构成。例如：

# right{color：background-color:red;font-size:20px;color:green}

<p id="right">使用class属性设置段落样式</p>

p是段落元素选择器，在P中应用了id=”right“这个选择器后，该段落中的文字会被设置成”背景色为红色、字体大小为20像素以及字体颜色为绿色“。

对于类选择器和id选择器的选择问题，要注意以下几点：

1）、是否在一个文档内重复使用

• 类选择器可以在一个文档内根据需要多次使用
• id选择器只能在文档内应用一次。

所以，如果需要多次使用相同的特定选择器，类选择器是最好的选择。

2）、是否可以使用组合类选择器

对于同一个HTML元素，可以使用多个类选择器格式化，而如果使用id选择器，只能用一个。这意味着类选择器有更广泛的应用。例如：

<p class="c1 c2">

.c1{color: red;} .c2{background-color:bule;}

3)、id选择器比类选择器更具体

有时候会发生一个声明与其它声明冲突的情况。这些冲突可以使用样式表的重叠解决。如果类选择器和id选择器的声明有冲突，最后将选择id选择器的声明。

4、伪类选择器

前面介绍的选择器都是能够与HTML中具体标记对应的，但是像段落的第一行、超链接访问前后等，就没有HTML标记与之对应，从而也没有简单的CSS选择器应用，为此CSS引进了伪类选择器。其用法如下：

标记：伪类名{}

常用伪类如下：

link:设置a标记在未被访问前的样式

hover：设置a标记在鼠标悬停时的样式

active：设置a标记在被用户激活（鼠标单击与释放之间）时的样式

visited：设置a标记在被访问后的样式

first-letter：作用于块，设置第一个字符的样式

first-line：作用于块，设置第一个行的样式

first-child：设置第一个子标记的样式

例如：

a：link{color:gray;text-decration:none;} 链接在访问前灰色，无下划线

a:visited{color:blue;text-decration:none;} 链接访问后蓝色，无下划线

a:hover{color:red;text-decration:underline} 鼠标悬停时，红色，有下划线

a:active{color:yellow;text-decration:underline} 链接激活后，黄色，有下划线

p:first-letter{font-weight:bold;font-family:"黑体"} 段落的第一个字黑体加粗

p：first-line{font-size:32px} 段落的第一行字号32px

注：对链接编写样式规则时，必须按照上面的顺序，即link、visited、hover、active

5、其它选择器

交集选择器：

p.c2{color:red;font-size:20px;}

li.c3{color:red;}

前者选择所有class=“c2”的<p>元素，后者选择所有 class=“c3”的<li>元素

并集选择器：

.c1,.c2,c3{color:red}

选择器c1、c2和c3中的声明均包含颜色属性红色

后代选择器:

后代选择器用于选择一个元素的后代元素，例如： p em{color:blue;} 该样式规则只选择<p>元素后代的<em>元素

通配符选择器:

通配符选择器用于选择所有元素。例如： *{color：bule} 会将页面上所有的HTML元素格式化为蓝色。