伪类和伪元素

伪类选择符

伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: value; }，简单地用一个半角英文冒号（:）来隔开选择符和伪类。
CSS很多的建议并没有得到浏览器的支持，但有四个可以安全使用的用在连接上的伪类。
:link用在未访问的连接上。
:visited用在已经访问过的连接上。
:active用于获得焦点（比如，被点击）的连接上。
:hover 用于鼠标光标置于其上的连接。
:after 用于显示紧跟在元素后面的内容 content。
a.snowman:link { color: blue; } a.snowman:visited { color: purple; } a.snowman:active { color: red; } a.snowman:hover { text-decoration: none; color: blue; background-color: yellow; }

伪元素选择符

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

E:first-lette/E::first-letter伪元素的样式将应用于元素文本的第一个（母）。E:first-line/ E::first-line伪元素的样式将应用于元素文本的第一行。E:before/ E::before在元素内容的最前面添加新内容,用来和content一起用E:after/ E::after在元素内容的最后面添加新内容。

注意：css3中的冒号可以改为双冒号；选择符：：伪元素｛属性：值｝

Eg：

/*链接前加图片*/

<style>

a[href$=docx]::before{

content: url(../img/q.png); }

</style>

<body>

<p>

</p>

</body>s

运行样式：

以上用了伪类元素就可以是代码简单化

posted @ 2014-09-21 12:02 vase 阅读(174) 评论(0) 收藏举报

刷新页面返回顶部

伪类和伪元素

公告