一般选择符

3.2.1　一般选择符

3.2.1.1　元素选择符

CSS中最常用的选择符就是元素选择符，元素选择符是用来寻找特定的HTML元素，比如段落(p)、标题(h1～h6)、表格(table，tr，td)、列表(ul，li)等。书写元素选择符定义时，不需要在名称之前加点号(“．”)，也不需要加井号(“#”)，而是直接给出元素选择符即HTML元素的名称。比如:

当在对应的HTML中使用这些定义时，无需做任何引用，相应的样式直接生效。

3.2.1.2　类选择符

使用类选择符时，必须在类选择符前面加上点号“．”。类选择符的名称则可以根据需要随意书写，不过类选择符在对应的HTML文件中需要用关键字class进行引用，所定义的样式才能生效。比如，有类选择符定义如下:

在该CSS对应的HTML文件中，需要这样引用才能生效:

3.2.1.3　 ID选择符

ID选择符和类选择符有些类似，区别在于ID选择符定义时需要在其前面加上井号“#”而不是点号“．”，在对应的HTML文件中需要用关键字id而不是class来进行引用。一般而言，类选择符需要在对应的HTML文件中使用多次，而ID选择符只需要用一次。所以前者多用于一般样式，而后者多用于排版。而且ID选择符多与HTML的div和span等排版元素搭配使用。比如，有ID选择符定义如下:

则在对应的HTML文档中需要如下声明才能生效。

3.2.1.4　伪类选择符

伪类选择符一般能表示文档结构之外的其他条件(比如行为)对HTML应用样式的影响。比如根据表单、链接的不同状态，给链接以不同的样式显示。伪类选择符一般用冒号作为分隔符，通常有下面几个。

: link/*只能和a结合，组成链接伪类a: link，表示链接初始的颜色*/

: visited/*只能和a结合，组成链接伪类a: link，表示链接访问过后的颜色*/

: hover/*理论上能和任何元素结合，表示鼠标悬停的效果*/

: active/*理论上能和任何元素结合，表示鼠标点击瞬间的效果*/

: focus/*理论上能和任何元素结合，表示键盘选择聚焦的效果*/

伪类一般不能单独使用，需要配合某元素才能使用。最常用的伪类就是前面四个与链接元素a结合起来的选择符，它们组成链接伪类。也有: hover和表格元素tr结合起来，反映鼠标移动到表格时的变化。比如下面定义链接的显示样式:

a: link{color: blue}

a: visited{color: green}

a: hover active{color: red}

tr: hover{}

链接伪类定义时必须按照上面一定的顺序进行，否则会造成一些意想不到的问题。为了便于记忆，这个顺序可以记为: L(o)V(e)H(a)T(e)。

3.2.1.5　后代选择符

后代选择符可以指定特定的HTML元素或者元素组合的后代的样式。后代选择符由两个或多个特定的选择符组成，它们之间用空格隔开。在对应的HTML代码中，只要后面的选择符是作为前面选择符的子元素，那么该CSS的定义就会生效。比如:

在对应的HTML文档中如果有如下代码:

则上述CSS的定义会对a元素也生效。不一定a要作为li的直接子元素，只要a元素作为li的后代元素出现，那么这个CSS定义就会生效。

3.2.1.6　通用选择符

通用选择符好比通配符，它可以匹配所有HTML元素。它用一个星号“*”表示。比如: