CSS选择器（一）

CSS的规则主要由两个部分组成：选择器和一条或多条声明,代码形式表现如下：

Selector{declaration1;declaration2.....;}

选择器通常就是我们需要改变样式的HTML的元素。其中，每条声明又是由一个属性（property）和一个值（value）组成,属性与属性之间通常用分号隔开。代码的形式则表现为：

Selector{property1:value1；property1:value2}

以上是对CSS规则的简单概述，接下来的才是这篇文章的重点——CSS选择器。

CSS选择器分为以下几大类：

1．通用选择器：

书写：*{...}

作用范围：页面中的所有元素。

2.元素选择器：

书写：元素名{...}

作用范围：指定的元素下的内容。如div{...}

3.ID选择器：

书写：#ID值{...}

作用范围：指定具有ID值的元素。如#p{...}

4.类别选择器：

书写：.类名{...}

作用范围：具有指定的class值的所有元素内容。如.mark{...}

以上四种是最常用的几种，但是有时候如果仅用以上几种选择器，也并不是很方便，因为它只能针对其所固有的相对应的值。接下来介绍的几种选择器主要是针对相关联的元素内容、

5.并列/过滤选择器：

书写：选择器1选择器2{...}

作用范围：选择可被两个选择器同时选中的内容。如p.mark{...},.mark.product{...}

6.子元素选择器（后代选择器）：

书写：选择器1 选择器2{...}（选择器1与选择器2之间是空格）

作用范围：选择可被选择器1选择的元素下的所有子元素能被选择器2选择的部分。

7.直接子元素选择器：

书写：选择器1>选择器2{...}

作用范围：选择器1的直接子元素，可被选择器2选中的元素。

兼容性问题：IE6不支持。

8.相邻兄弟选择器；

书写：选择器1+选择器2{...}

作用范围：选择器1和选择器2所有的元素。值得注意的是：选择器1和选择器2是紧挨着的，且有相同的父元素。

8.多选/多组选择器：

书写：选择器1，选择器2，选择器3...,选择器n{...}

作用范围：选择可被以上任何选择器选中的元素。

9.伪类选择器：

a:link{...}未被访问的超链接

a:visited{...}被访问后的超链接

元素:hover{...}鼠标悬停时的样式——>IE6只支持a:hover

元素:active{...}当元素被激活时。

input:focus{...}当元素获得输入焦点时——>IE7之前都不支持

元素名：first-child{...}某父元素下，第一个子元素。比如body下有若干p元素。P:first-child{...}则表示第一个p元素。

元素名:first-line，文本首行—只能用于块级元素。如：font.color,background,word-spacing,letter-spacing,text-decoration,vertical-aliogn,

text-transform,line-height,clear

元素名:first-letter，文本首字母—只能用于块级元素。font.color,background,margin,pading,border,text-decoration,vertical-align（仅当float为none）,text-transform,line-height,float,clear

元素名:before{...}在元素的内容前面插入内容。

元素名:after{...}在元素的内容后面插入内容。

 

元素名:lang{...}向带有指定lang属性的元素添加样式。

 

CSS样式的优先级：

!important>内联样式>#ID选择器>类选择器/伪类选择器>元素选择器>浏览器预定义样式