伪类 按现在的规范应当书写成 :weilei伪元素 按现在的规范 应当书写成 ::weiyuansu
但是 以前规范不明确的时候 伪元素 和 伪类 都是写成 :weiyuansu :weilei
为了相容过去的写法
所以 你的伪元素 写成一个引号的形式 也是可以被解析的
伪元素主要有：E:first-letter/E::first-letter E:first-line/E::first-line E:before/E::before E:after/E::after E::placeholder E::selection
伪类主要有：E:link E:visited E:hover E:active E:focus E:lang(fr) E:not(s) E:root E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n) E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-last-of-type(n) E:empty E:checked E:enabled E:disabled E:target @page:first @page:left @page:right
单冒号 双冒号 主要是为了区别 伪元素还是伪类
的伪类选择器<style type=text/css>
/*
伪类选择器：伪类选择器就是对元素处于某种状态下进行样式的。
注意：
1. a:hover 必须被置于 a:link 和 a:visited 之后
2. a:active 必须被置于 a:hover 之后
*/
a:link{color:#F00} /* 没有被点选过---红色 */
a:visited{color:#0F0} /* 已经被访问过的样式---绿色 */
a:hover{color:#00F} /* 滑鼠经过的状态---蓝 */
a:active{color:#FF0}
</style>
应用 程式码：
<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" ":w3./TR/x1/DTD/x1-transitional.dtd">
<xmlns=":w3./1999/x">
<head>
<meta -equiv="Content-Type" content="text/charset=utf-8" />
<title>无标题文件</title>
</head>
<style type=text/css >
table{
background-color:#CCC
border-collapse:collapse
border:3px
}
tr:hover{
background-color:#06F
}
</style>
<body>
<table border=1px width=400px height=300px align=center >
<tr>
<th>姓名</th>
<th>成绩</th>
<th>人品</th>
</tr>
<tr>
<td>张三</td>
<td>98</td>
<td>差</td>
</tr>
<tr>
<td>李四</td>
<td>50</td>
<td>极好</td>
</tr>
<tr>
<td>综合测评</td>
<td colspan="2">不错</td>
</tr>
</table>
</body>
</>
怎么用伪类选择器nth-frist-child伪类选择器nth-frist-child，应该是伪类选择器 nth-child()，其在IE6-8和FF3.0-浏览器不支援,CSS3中nth-of-type(n)（比如nth-of-type(1)）这个特殊的类选择符可以样式更加个性的标题和段落等，不过，目前nth-of-type(n)只支援火狐3、opera、safari和chrome等部分浏览器。
例子：
li:nth-child(3){background:orange}/*把第3个li的背景设为橙色*/
li:nth-child(3n){background:orange}/*把第3、第6、第9、…、所有3的倍数的li的背景设为橙色*/
li:nth-child(n+3){background:orange}/*选择从第3个元素后面的li背景设为橙色*/
li:nth-child(-n+3){background:orange}/*选择从第3个元素前面的li把背景设为橙色*/
li:nth-child(3n+1){background:orange}/*这种方法是实现隔几选一的效果*/
标记选择器、类选择器、id选择器、伪类选择器的先后顺序是什么？1、id选择器；
2、类选择器；
3、标记选择器；
4、最后是伪选择器。
id选择器（#myid）；
类选择器（.myclassname）；
标签选择器（div,h1,p）；
相邻选择器（h1+p）；
子选择器（ul <li）；
后代选择器（li a）；
万用字元选择器（*）；
属性选择器（a[rel="external"]）；
伪类选择器（a:hover,li:nth-child）。
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{}
作用：通过元素的class属性值选中一组元素
语法：.class属性值{}
id选择器
作用：通过元素的id属性值选中唯一的一个元素
语法：#id属性值{}
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
选择器分组（并集选择器）
作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
通配选择器
作用：可以用来选中页面中的所有的元素
语法：*{}
元素之间的关系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}
有时候，你需要选择本身没有标签，但是 仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素。
给链接定义样式：
有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4中不同的方式。
其他：
否定伪类
否定伪类可以帮助我们选择不是其他东西的某种东西。
语法： :not(选择器){}
比如p:not(.hello)标识选择所有的p元素，但是class为hello的除外。
属性选择器可以挑选带有特殊属性的标签。
语法：
[属性名]
[属性名 = "属性值"]
[属性名 ~= "属性值"]
[属性名 ^= "属性值"]
[属性名 |= "属性值"]
[属性名 $= "属性值"]
[属性名 *= "属性值"]
作用：选中指定父元素的指定子元素
语法：父元素 >子元素
比如body >h1将选择body字标签中的所有h1标签
IE6及以下的浏览器不支持子元素选择器
其他子元素选择器
除了根据祖先父子关系，还可以根据兄弟关系查找元素。
语法：
兄弟元素 + 兄弟元素 ：查找后边一个兄弟元素
兄弟元素 ~ 兄弟元素：查找后边所有的兄弟元素
在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。
比如：
这两个选择器都会选择h1元素，如果两个选择器设置的样式不一样那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用哪个样式呢？CSS中会默认使用权重较大的样式，下面看一下权重又是如何计算的。
不同的选择器有不同的权重值：
CSS中常用的选择器：（一）基本选择器（二）层次选择器（三）动态伪类选择器（四）目标伪类选择器（五）ui状态伪类选择器（六）结构伪类选择器（七）属性选择器（八）伪元素 (一)基本选择器1.标签选择器：通过标签名获取元素 权重：0001 （此种选择器影响范围大，建议尽量应用在层级选择器中。）2.class选择器：通过 . 类名获取元素权重：0010 （通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。）3.id选择器：通过 # id名获取元素 权重：0100 （通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。 ）4. * 通配符选择器：获取到页面的所有元素5.群组选择器：用逗号隔开基本选择器，表示这些选择器都获取到 (二)层次/关系选择器 （主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。）1.包含选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代例：p a { color:red}2.子代选择器：用>隔开基本选择器，表示后一个选择器是前面的子代例：ul>li { line-style: none}3.相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的） 例： a+a { }4.兄弟选择器：E~F:表示获取到E后面所有的同级的F元素 例： li~li { }(三）动态伪类选择器1. a:link 锚链接被访问前添加样式2. a:visited 锚链接被访问后添加样式3. e:hover 鼠标悬停在元素上添加样式4. e:active 鼠标点击元素时添加样式5. :focus 表单元素被聚焦时，添加样式(四)目标伪类选择器语法： 目标:target {属性：属性值} 被选中的目标添加样式目标:target E子元素{属性：属性值} 被选中的目标里的E子元素添加样式 (五)ui状态伪类选择器1. :enabled 可用的表单元素添加样式2. :disabled 不可用的表单元素添加样式(disabled )3. :checked+E 被选中的表单元素添加样式(六)结构伪类选择器1. E:first-child 获取到E元素，且要满足为其父元素的第一个孩子。2. E:last-child 获取到E元素，且要满足为其父元素的最后一个孩子3. E:nth-child(n) 获取到E元素，且要满足为其父元素的第n个孩子n的用法：(1)6n倍数 (2)even偶数/2n odd奇数/2n-1（如可用来选中奇偶行来实现 “隔行换色”） (3) -n+5 选中1-5(4)p:nth-child(-n+3):nth-child(n+2) 2-3个4. E:nth-last-child(n) 获取到E元素，且要满足为其父元素的倒数第n个孩子5. E:first-of-type 获取到E元素，且要满足为其父元素的第一个该类型的孩子6. E:last-of-type 获取到E元素，且要满足为其父元素的最后一个该类型的孩子7. E:nth-of-type(n) 获取到E元素，且要满足为其父元素的第n个该类型的孩子8. E:nth-last-of-type(n)获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子9. E:empty 获取到空的E元素（注：连空格都不能有）(七)属性选择器1. E[attr] 拥0有attr属性的E元素添加样式 如div[class] 2. E[attr="val"] 拥有attr属性值 为 val的E元素添加样式 如p[class="ab"]3. E[attr*="val"] attr属性值 包含 val的E元素添加样式 如ul[class="c"] 指class类名中包含有c字母的E元素4. E[attr^="val"] attr属性值以val 开头 的E元素添加样式5. E[attr$="val"] attr属性值以val 结尾 的E元素添加样式(八)伪元素1. E::before给E元素添加第一个子元素 （前面） 2. E::after 给E元素添加最后一个子元素（后面）3. E::first-letter给E元素第一个字添加样式4. E::first-line给E元素第一行添加样式 5. E::selection 元素内容被选中时添加样式(火狐需要加前缀-moz-)
