css是用于控制页面布局和显示的语言。原理是，选中相应的对象，而后赋予它想要的布局和样式。须要经过选择器来获取目标对象。对CSS中的选择器作一个常规的整理和分类。css
1. 选择器html
要给对象设置样式：选择器，声明（一个或者多个），声明（属性：值）组成，以下所示：布局
selector { property1：value;property2:value;property3:value } declaretion声明字体
2. 基本选择器spa
CSS中的基本选择器有三种：元素选择器（标记，标签），类选择器，ID选择器。ssr
<p class="red" id="notice">你们好</p>
对于这条HTML语句，要给他设置的样式是字体是红颜色的。
可使用选择器： p{ } .red{ } #notice{ }
设置颜色：color:red;设计
可使用这三种基本选择器中的任意一种便可完成颜色设置。code
2.1 元素选择器：htm
找到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>锚的伪类有四种，分别表示超连接的不一样状态：
{color: #FF0000} /* 未访问的连接 */ {color: #00FF00} /* 已访问的连接 */ {color: #FF00FF} /* 鼠标移动到连接上 */ {color: #0000FF} /* 选定的连接 */
a:linka:visiteda:hovera:active
a:hover 必须被置于 a:link 和 a:visited 以后，才是有效的。a:active 必须被置于 a:hover 以后，才是有效的。
：first-child 这个不是说某个的第一个子元素，而是以某个元素为第一子元素的元素。 在IE中必需要声明<!DOCTYPE html>才有效
：lang() 向带有指定lang属性的元素添加样式。
：focus 向某个拥有键盘输入焦点儿的元素设置样式。
CSS全部的选择器类型都已经在上面罗列，但不是说知道有哪几种选择器就能够了，选择器类型虽然有限，可是组合使用，结果有变幻无穷，很丰富，很强大。须要慢慢去实践，总结一套管用的选择器使用方法。