css选择器
大概有这么几类：ID选择器、类别选择器、标签选择器、后代选择器、伪类选择器、相邻同胞选择器、属性选择器
1、ID选择器
ID 选择器允许以一种独立于文档元素的方式来指定样式。
ID选择器和类选择器的区别：在一个文档中，ID选择器的值是唯一的且区分大小写，即id="first"只能在文档中出现一次，而类选择器可以出现多次，例如：class="info"可以出现多次。
格式： #idname
<html> <head> <title>css选择器</title> </head> <style> #first { color:red; } .test { color:blue; } </style> <body> <div id="first"> 由于ID选择器的优先级小于类选择器，所以这段话显示为红色，而"css选择器"为红色 <p class="test">css选择器</p> <h1 class="test">css选择器</h1> </div> </body> </html>
2、类选择器
类选择器有几种情况：
.info{ } 选择class="info"的所有元素
p.important{ } 选中p元素中所有class值为important的段落。p可以换位其他的元素，ep：a、table、div等。
.first.second{ } 选中的是class="first second"的元素，这个元素包含为class="first "和class="second"设置的样式。
.first.third { } 定义的样式适用于class="first third"和class="first third second",但是不适用于class="first second"
3、标签选择器（元素选择器）
p {} p{}表示选择页面中所有的<p>元素
div,p {} 选择页面中所有<div>元素和<p>元素
4、后代选择器（包含选择器）
div p {} 选择<div>元素内部的所有的<p>元素，即只要是包含在<div>元素中<p>元素都会被选中。
5、子元素选择器
div>p 选择父元素为<div>元素的所有<p>元素 注：这里选中<p>元素的前提是这个<p>元素的父元素必须是个<div>元素
<html> <head> <title>css选择器</title> </head> <style> p > strong { color:red; } div > a { color:green; } </style> <body> <div>
<!-- 下面这句话中只有“重要”两个字会变为红色，“很”字则不会，因为“很”字对应的<strong>标签是<em>的子标签，而不是<p>元素的子标签 --> <p>这个<em><strong>很</strong></em><strong>重要</strong></p> <h2><a href="#">这是个链接</a></h2>
<!-- 这有下面的这个链接会变为绿色，因为这里的<a>元素才是<div>的子元素，而上面的链接是<h2>的子元素 --> <a href="#">这也是一个链接</a> </div> </body> </html>
6、伪类选择器 用于像某些选择器添加特殊的效果。
a:link {color:blue;} /* 未访问的链接 */
a:visited {color:red;} /* 已访问的链接 */
a:hover {color:green;} /* 鼠标移动到链接上 */
a:active {color:yellow;} /* 选定的链接 */
注意：在css定义中，a:hover必须被置于a:link和a:visited之后才是有效的。在css定义中，a:active必须置于a:hover之后，才是有效的。
first-child伪类（css2）
<html> <head> <title>css选择器</title> </head> <style> p:first-child { color:red; } a:first-child { color:blue; } </style> <body> <div> <p>first</p> <p>second</p> <a href="#">third</a> <a href="#">forth</a> </div> </body> </html>
之所以“first”是红色，是因为“first”所在的<p>元素是<div>元素的第一个子元素。但是这里的“third”不会变为蓝色，因为“first-child”表示的是某个元素(这里是<div>元素)，
的第一个子元素，并不会因为元素的不同而区分不同元素间的第一个。
7、相邻同胞选择器
div+p 选中的是<div>元素中紧跟在<div>元素后面的第一个<p>元素。所以“first”会变为红色。
<html> <head> <title>css选择器</title> </head> <style> div+p { color:red; } </style> <body> <div> </div> <p>first</p> <p>second</p> </body> </html>
8、属性选择器
*[title] {color:red;} 将包含标题（title）的所有元素变为红色。
a[href] {color:red;} 将只对有href属性的<a>元素变为红色。
a[href][title] {color:red;} 只将同时拥有href和title属性的<a>元素变为红色。
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
将拥有href属性同时属性值为"http://www.w3school.com.cn/about_us.asp"的<a>元素变为红色。
[title~=hello] {color:red;} <a title="hello world" >hello world</a>
<p title="hello">hello world</p>
<a>和<p>元素都会被设置为红色。
[属性|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[属性^=value] 匹配属性值以指定值开头的每个元素。
[属性$=value] 匹配属性值以指定值结尾的每个元素。
[属性*=value] 匹配属性值中包含指定值的每个元素。