伪类和伪元素

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

 

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

1 a元素的伪类

a元素的伪类包括：

1. :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 

2、: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~~~≥ω≤