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

最新推荐文章于 2022-04-19 21:24:04 发布

weixin_30838873

最新推荐文章于 2022-04-19 21:24:04 发布

阅读量1k

点赞数 1

原文链接：http://www.cnblogs.com/cdyboke/p/6918689.html

版权

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选择器样式触发时链接到链接页面

转载于:https://www.cnblogs.com/cdyboke/p/6918689.html

weixin_30838873

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css 伪元素 :hover :active :before :after :visited :link :focus ...

CSS 伪元素所有CSS伪类/元素选择器示例示例说明:linka:link选择所有未访问链接:visiteda:visited选择所有访问过的链接:activea:active选择正在活动链接(点击后的效果):hovera:hover把鼠标放在链接上的状态:focusinput:focus...
复制链接

扫一扫