css--伪类、伪元素

最新推荐文章于 2024-06-17 15:18:41 发布

han0715

最新推荐文章于 2024-06-17 15:18:41 发布

阅读量3.5k

点赞数 3

文章标签： css html css3

本文链接：https://blog.csdn.net/bule_sky78/article/details/120890507

版权

10-21

伪元素选择器

:first-line 伪元素

“first-line” 伪元素用于向文本的首行设置特殊样式。

<!DOCTYPE html>
<html>
<head>
<style>
    p:first-line 
    {
    color:#ff0000;
    font-variant:small-caps;
    }
</style>
</head>

<body>
    <p>可以使用:first line伪元素向文本的第一行添加特殊效果。</p>
</body>
</html>

注意："first-line"只能用于块级元素

可使用一下属性:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

:first-letter 伪元素

“first-letter” 伪元素用于向文本的首字母设置特殊样式

<style>
    p:first-letter 
    {
    	color:#ff0000;
    	font-size:xx-large;
    }
</style>

注意： “first-letter” 伪元素只能用于块级元素。

可使用以下属性：

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if “float” is “none”)
text-transform
line-height
float
clear

CSS - :before 伪元素

“:before” 伪元素可以在元素的内容前面插入新内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
    h1:before {content:url(/statics/images/course/smiley.gif);}
</style>
</head>

<body>
    <h1>这是一个标题</h1>
    <p>这是一个标题：before伪元素在元素之前插入内容。</p>
    <h1>这是一个标题</h1>
    <p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>
</html>

CSS - :after 伪元素

“:after” 伪元素可以在元素的内容之后插入新内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
    h1:after {content:url(/statics/images/course/smiley.gif);}
</style>
</head>

<body>
    <h1>这是一个标题</h1>
    <p>在伪元素插入元素后的内容。</p>
    <h1>这是一个标题</h1>
    <p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性。</p>
</body>
</html>

所有CSS伪类/元素

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

han0715

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css--伪类、伪元素

10-21伪元素选择器:first-line 伪元素“first-line” 伪元素用于向文本的首行设置特殊样式。<!DOCTYPE html><html><head><style> p:first-line { color:#ff0000; font-variant:small-caps; }</style></head><body> <p&gt
复制链接

扫一扫