css选择器

什么是选择器呢？

每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

类别选择器

类选择器根据类名来选择前面以”.”来标志，如：

.demoDiv{

color:#FF0000;

}

在 HTML中，元素可以定义一个class的属性。

标签选择器

一个完整的HTML页面是有很多不同的标签组成，而 标签选择器，则是决定哪些标签采用相应的CSS样式，(在大环境中你可能处于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：

p{

font-size:12px;

background:#900;

color:090;

}

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

ID选择器

ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次，例如，你将一个元素的id取值为”navi”，那么在同一页面你就不能再将其他元素id取名为”navi”了。尽管你会发现即便你把几个元素都命名成相同的id名字，css选择器还是会把这些元素都选中应用样式（如class选择器那样），对于css选择器，id属性的唯一性似乎不存在。然而，对于js而言，它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯，同一个id不要在页面中出现第二次。

前面以”#”号来标志，在样式里面可以这样定义：

#demoDiv{

color:#FF0000;

}

伪类选择器

伪类是指那些处在特殊状态的元素。

伪类名可以单独使用，泛指所有元素，也可以和元素名称连起来使用，特指某类元素。伪类以冒号（：）开头，元素选择符和冒号之间不能有空格，伪类名中间也不能有空格。

a：link{

}

伪元素选择器

CSS伪元素是用来添加一些选择器的特殊效果。

伪元素选择器的格式与伪类选择器一致。

“first-line” 伪元素用于向文本的首行设置特殊样式

运行结果：


通配符选择器
通配符选择器也是一种简单选择器，用"*"表示，一般称之为通配符，表示对任意元素都有效。格式如下：


属性选择器

对带有指定属性的HTML元素设置样式。

派生选择器

后代选择器(以空格 分隔)

子元素选择器(以大于>号分隔）

相邻兄弟选择器（以加号+分隔）

后代选择器
div p {
width: 100px;
}

子选择器
.user > span{
position: relative;
}

相邻选择器
div + table{
border:1px solid #CCC;
}

兄弟选择器
p ~ div{
height: 300px;
}