css 选择器

浏览数：17 / 时间：2015年06月09日

css是用于控制页面布局和显示的语言。原理是，选中相应的对象，然后赋予它想要的布局和样式。需要通过选择器来获取目标对象。对CSS中的选择器做一个常规的整理和分类。

1. 选择器

要给对象设置样式：选择器，声明（一个或者多个），声明（属性：值）组成，如下所示：

selector { property1：value;property2:value;property3:value } declaretion声明

2. 基本选择器

CSS中的基本选择器有三种：元素选择器（标记，标签），类选择器，ID选择器。

<p class="red" id="notice">大家好</p>
对于这条HTML语句，要给他设置的样式是字体是红颜色的。
可以使用选择器： p{ } .red{ } #notice{ }
设置颜色：color:red;

可以使用这三种基本选择器中的任意一种即可完成颜色设置。

2.1 元素选择器：

找到document对象（html 文档）下面的所有的符合要求的元素。个数是零个，一个或者多个。

2.2 类选择器：

找出document对象（html 文档）下面的所有类是指定类的对象。有零个，一个或者多个。

2.3 ID选择器：

找出document对象（html 文档）下面的所有的ID是指定ID的对象，可能是零个，一个或者多个，严格要求下一个文档中一个ID名只能用在一个对象上，所以个数为零个或者一个，多个则是错误的用法。

3. 复合选择器

在实际开发中前面提供的三种选择器方式显得比较局限，可以使用上面的三种选择器扩展出很多复合型的，非常有用的选择。有：分组选择器，后代选择器，子元素选择器，相邻兄弟选择器，伪类选择器，伪元素选择器。为页面设计，提供了更多更丰富，更强大，更复杂的选择器。

3.1 分组选择器

分组选择器不是一种特定的选择器，而是将多选基本选择器以及其他类型的复合选择器用逗号隔开，使用相同的样式的选择器。如下所示：

p,h1,span{} "p,h1,span"共同构成了一个组合选择器，该选择器中定义的样式可以同时应用到p元素中，h1元素中，span元素中，组合选择器的成员可以是相同类型的选择器，也可以是不同类型的选择器。

3.2属性选择器

属性选择器，是根据指定的属性找出所有有这个属性的对象。而且这个属性在对象中的存在形式也是多种多样的。

<input type="text"/> <input type="button"/>
上面的这个HTML语句，我们可以使用上文说到的元素选择器 input{} 进行选择，但是如果页面中有两个input ，，是不同的类型。这是为了给不同的input 设置不同的样式，可以采用属性选择器。
input [type="text"]{} input [type="button"]{} 这两个选择器及时属性选择器，可以省略前面的input,属性“type”在对象中的存在也有很多不同的形式。

[attribute] 用于选取带有指定属性的元素。

[attribute=value] 用于选取带有指定属性和值的元素。

[attribute~=value] 用于选取属性值中包含指定词汇的元素。

[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[attribute^=value] 匹配属性值以指定值开头的每个元素。

[attribute$=value] 匹配属性值以指定值结尾的每个元素。

[attribute*=value] 匹配属性值中包含指定值的每个元素。

3.3 后台选择器

后代选择器是选择某个（祖先）选择器的指定后代，这个后台可以是“儿子”也可以是“孙子”，甚至更远的关系。中间使用“ ”（空格）隔开。

如上面的HTML所示：<ul>的后代中有<li>，也有<ul>。 ul li{} 这个选择器会选中所有的li元素。

3.4 子元素选择器

子元素选择器是选择某个父选择器的指定“儿子”，而且必须是“儿子”，使用“>”号连接。

在上面的HTML中，ul li{} 选中了所有的li，如果只要选择父元素ul下面的子元素li呢？这时就要用子元素选择器ul > li{}了。但是这两者的区别在这儿体现的不明显。

3.5 相邻兄弟选择器

相邻兄弟选择器是选择拥有同一个父元素的所有（兄弟姐妹）元素。使用“+”号连接。

在上面的HTML中，第一个ul的子元素li之间是一种兄弟关系，第二个ul的子元素也是一种兄弟关系。

li + li {} 能选中兄弟关系的元素。

3.6 伪类选择器

<a></a>锚的伪类有四种，分别表示超链接的不同状态：

 a:link {color: #FF0000}		/* 未访问的链接 */
 a:visited {color: #00FF00}	/* 已访问的链接 */
 a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
 a:active {color: #0000FF}	    /* 选定的链接 */

a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。