CSS3进阶之伪类元素
Posted IT大亨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3进阶之伪类元素相关的知识，希望对你有一定的参考价值。
本文讲述的是伪元素 before和 after的一些用法。
:before 伪元素
:before 伪元素是放在已经选择元素的前面，要用content 属性，给这个元素插入内容。
eg：
在 <p> 标签的内容之前插入新内容：
<style>标签里的样式：
div p:before
{
content:"自我介绍:";
}
<body> 标签的内容：
<body>
<div>
<p>我是小花。</p>
<p>来自美丽的内蒙古呼伦贝尔大草原</p>
</div>
</body>
浏览器中出现的样式是这样的（如下图）：
:before和::before的区别
其实伪类和伪元素是有区别的，伪类听的比较多了，但伪元素可能听到的不是那么多了，CSS对这两个其实是有区别的。
写网页时你会发现伪类元素使用了两个冒号 (::)，不是一个冒号 (:)，这是 CSS3规范中的要求，就是为了区分伪类和伪元素，而大多数浏览器都支持这两种表示方式。
单冒号用于 CSS3伪类，双冒号用于 CSS3伪元素。 像CSS2的伪元素 :before，单冒号和双冒号的写法 ::before作用是一样的。如果不兼容各大浏览器的话，用 CSS2的单冒号写法会更好。
伪元素虽然很强大，但有些标签是不支持伪元素 before和 after的。就像 <img> 、<input>、<iframe>，是不支持类似 img::before这样用的。
如果想要标签支持伪元素，这个元素是要可以插入内容的，也就是说这个元素要是一个容器，就像div，我们可以把它看成一个容器，而 input，img，iframe等元素都不能包含其他元素，所以不能插入伪元素。
：after伪元素
：after伪元素是在元素之后添加内容，:after是行内元素，可以用display属性改成块级元素。
在 <p> 标签的内容之前插入新内容：
<style>标签里的样式：
div p:after
{
h1:after {content:url(./img/150820080169048.jpg)}
}
<body> 标签的内容：
<body>
<h1>This is a heading</h1>
<h1>This is a heading</h1>
</body>
浏览器中出现的样式是这样的（如下图）：
伪元素与sprites（雪碧图）
css雪碧图，即css Sprite，也叫css精灵图，是将小图标和背景图像合到一张图上，在利用css的背景来定位显示需要显示的部分。简单的来说，就是当你的鼠标移动到这个小图标时是一个图，移开时是另一张照片显示出来，其实这并不是两张图，而是一张集小图标和背景图像合并的一张“与众不同”点的图片。
附上一段简单的代码
eg：
a {
display:block; width:400px; height:550px; line-height:50px;
text-indent:-2015px;
background-image:url(photography.png);
background-position:0 0;
a:active {
background-position:-33 -28px;
/*鼠标普通状态，向下用负值*/
}
a:hover {
background-position:-33 5px;
/*鼠标滑过时的状态，向下用负值*/
}
}
单个颜色实现按钮的hover 、active的不同变化
试想一下这样的需求，根据不同的业务，设置一个链接的不同背景色，但一个按钮通常有 3个状态，normal状态，hover状态和 active状态，一般情况下hover是比原色稍微亮一点，active则稍微暗一点，他们之间还是有一定区别的。
如果要配置一个背景色不配置hover和 active颜色，使用 before、after伪元素就可以做到。
css3 transfrom属性
transform 属性就是元素的2D 或 3D 转换，它允许我们对元素进行旋转、缩放、移动或倾斜这样的行为。
附上一段简单的代码
eg：
div{
transform:rotate(5deg);
-ms-transform:rotate(5deg); /* IE 9 */
-moz-transform:rotate(5deg); /* Firefox */
-webkit-transform:rotate(5deg); /* Safari & Chrome */
-o-transform:rotate(5deg); /* Opera */
}
伪元素能够实现换行，替代<br>
块级元素在不脱离正常文档流的情况下是会自动换行，而行内元素不会自动换行。但在写代码时，有需要时，也让行内元素自动换行，一般这样的情况下，会用 <br/>标签来解决，但是一般我们都不建议这么做的。
但是我们运用after伪元素，也可以实现这样的换行。
比如，这样的例子：
.inline-element::after{
content:"A";
white-space:pre;
}
通过给元素的 after伪元素添加 content为 "A"的值。 A是什么呢？Unicode字符是专门代表换行符的：0x000A 。css中，也可以写作 " 00A"，或简写为 "A"。我们用它来作为 ::after伪元素的内容。它的作用其实就是跟<br/>标签的作用是一样的。
而 white-space: pre;的作用是保留元素后面的空白符和换行符，这样就可以实现换行。
如果朋友们有什么建议，或者文章中有不正确的地方，希望大家能够多多批评指正
以上是关于CSS3进阶之伪类元素的主要内容，如果未能解决你的问题，请参考以下文章