标签：style class code http tar ext
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 后台选择器
后代选择器是选择某个（祖先）选择器的指定后代，这个后台可以是“儿子”也可以是“孙子”，甚至更远的关系。中间使用“ ”（空格）隔开。
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
如上面的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 之后，才是有效的。
：first-child 这个不是说某个的第一个子元素，而是以某个元素为第一子元素的元素。 在IE中必须要声明<!DOCTYPE html>才有效
：lang() 向带有指定lang属性的元素添加样式。
：focus 向某个拥有键盘输入焦点儿的元素设置样式。
CSS所有的选择器类型都已经在上面罗列，但不是说知道有哪几种选择器就可以了，选择器类型虽然有限，但是组合使用，结果有千变万化，很丰富，很强大。需要慢慢去实践，总结一套管用的选择器使用方法。
标签：style class code http tar ext
原文地址：http://www.cnblogs.com/jameslong/p/3783805.html
