伪类选择器，伪类和伪元素的区别
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了伪类选择器，伪类和伪元素的区别相关的知识，希望对你有一定的参考价值。
参考技术A伪类选择器，伪类和伪元素的区别, css3中伪类选择器和伪物件选择器的区别
伪类 按现在的规范应当书写成 :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:linkcolor:#F00 /* 没有被点选过---红色 */
a:visitedcolor:#0F0 /* 已经被访问过的样式---绿色 */
a:hovercolor:#00F; /* 滑鼠经过的状态---蓝 */
a:activecolor:#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）。
总结伪类和伪元素的区别
最学习css的时候，伪类和伪元素很容易混淆。当时看了很多区别文章还是迷糊。只有自己总结的东西才是自己的，我把我的方法介绍给你吧，对你可能有用。
先看看w3c对伪类和伪元素的定义及种类：
伪类 [用于向某些选择器添加特殊的效果]
伪元素 [用于将特殊的效果添加到某些选择器]
1、伪类 向选择器添加特殊效果，我们可以把选择器当成一个目标选择器，就相当于给一个选择器添加多种特殊效果。伪类即［一对多］
伪元素 将特殊效果添加到选择器，伪元素里面的效果是多样的，选择器还是一个。伪元素即［多对一］
无论是一对多还是多对一，都针对的是一个选择器，只是前后顺序差异。
2、伪类需要给元素添加class或者id，或者一些标签，如span。改变了文档结构。而伪元素则不用。
以上是关于伪类选择器，伪类和伪元素的区别的主要内容，如果未能解决你的问题，请参考以下文章