码迷,mamicode.com
首页 > Web开发 > 详细

css 伪元素 :hover :active :before :after :visited :link :focus ...

时间:2017-05-29 19:14:46      阅读:347      评论:0      收藏:0      [点我收藏+]

标签:link   ie8   :focus   html   wiki   dia   org   选择   style   

CSS 伪元素

所有CSS伪类/元素

选择器示例示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接(点击后的效果)
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p> 元素的第一个字母
:first-line p:first-line 选择每个<p> 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值

 

例子:

<style>
p.a:before
{
    content:"Read this -";
}
</style>
</head>

<body>
<p class="a">My name is Donald</p>
<p class="a">I live in Ducksburg</p>

<p class="a"><b>注意:</b>  :before 作用于 IE8,DOCTYPE 必须已经声明.</p>

My name is Donald

I live in Ducksburg

注意: :before 作用于 IE8,DOCTYPE 必须已经声明.

 例子:

 

<style>
.b:active
{
    background-color:yellow;
}
</style>
</head>
<body>

<a class="b" href="http://www.runoob.com/">runoob.com</a>
<a class="b" href="http://www.wikipedia.org">wikipedia.org</a>

<p><b>注意:</b>  :active选择器样式触发时链接到链接页面</p>

runoob.com wikipedia.org

注意: :active选择器样式触发时链接到链接页面

 

css 伪元素 :hover :active :before :after :visited :link :focus ...

标签:link   ie8   :focus   html   wiki   dia   org   选择   style   

原文地址:http://www.cnblogs.com/cdyboke/p/6918689.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!