伪类和伪元素

本文地址：http://www.cnblogs.com/veinyin/p/7606766.html

伪类和伪元素使用起来要比属性选择器更加炫酷呢~

1 a元素的伪类

a元素的伪类包括：

:link　　2. :visited　　3. :focus　　4. :hover　　5. :active

　　一般来说，我们在设置链接样式的时候使用1 2 4 这三个伪类就足够了，因为我们只需要设置链接点击前后与悬停时的样式页面可用性就已经很不错了。默认最佳顺序即为上述顺序。当然 :focus 伪类不仅仅只能用于链接，如以下语句使得focus处背景为银色，同时字体加粗：

1 input :focus{
2     background: sliver;
3     font-weight: bold;
4 }

IE7不支持对表单元素应用focus

二、:first-child 伪类

　　:first-child 是一个极易产生误解的伪类，一直以来我对它的理解都是错误的，直到我意识到了一个问题，下面是按照《 CSS权威指南》中的示例代码手敲的，发现在chrome 与 IE 中测试均非书上效果，以下是我手打的代码

HTML：

1 <div>
2     <p>there are the necessary steps:</p>
3     <ul>
4         <li>Insert key</li>
5         <li>Turn key <strong>clockwise</strong></li>
6         <li>Push</li>
7     </ul>
8     <p>Do <em>not</em> push the brake</p>
9 </div>

CSS：

1 p :first-child{
2     font-weight: bold;
3 }
4 
5 li :first-child{
6     text-transform: uppercase;
7 }

上例效果：

由此我得到结论 :first-child 选择的是 p 和 li 的第一个子元素，而非书上所说选择的第一个 p 元素和第一个 li 元素，而书上的讲解有错误，一直到我在做第四点的测试时，意识到了自己犯了一个超级超级大的错误： 在冒号之前加了空格键！这几乎是不能原谅的....

去掉我私自加的空格之后得到结果正确，尴尬....

IE6 前不支持 :first-child， IE7 支持

3 结合伪类

结合伪类是我第一次学习时未接触到的，感觉很新奇呀，必须试试 \^o^/

1 a:link:hover{
2     color: red;     //未访问链接鼠标悬停时颜色为红色
3 }
4 
5 a:visited:hover{
6     color: yellow;      //已访问链接鼠标悬停时颜色为黄色
7 }

亲测可用哦~ 不过实际中不要用这两个颜色，这是记笔记比十六进制的颜色要方便查看些而已，要不然整个页面被老板看到了会被扣奖金的~

IE6 前不支持，只能识别到最后一个伪类，IE7 支持

4 :before　:after

可用于在元素前后插入内容，没错，我又又又又加了空格！导致的直接结果就是我不断刷新页面，结果出现的东西与我预期的区别实在是太大了

1 <h1>标题</h1>
2 <p>文本内容</p>

1 h1 :before{
2     content: "[]";
3     color: red;
4 }
5 
6 body :after{
7     content: "The End!"
8 }

这是让我感到疑惑的结果

于是我开始查看代码，可是代码如此简单，只有几行，很快我就得到了上面的结论，去掉空格后果然就大不相同了~

加上空格就相当于是子孙选择器了，所以不要随意加空格，这是十分不好的习惯，我就是在写到这里时才发现自己之前用到的伪类全都加上了空格，还好曾经都是给链接加样式，是可以识别的

5 以下是伪类伪元素无关的补充

既然写到加空格，那就再多说一个。

url(http://xxxxx.com)

要注意一定不能够在 url 与括号之间加上空格，否则会被忽视掉

END~~~≥ω≤