伪元素:顾名思义,伪元素实际上不存在,它们是CSS提供的额外"福利",方便选中内容
伪元素选择器的前缀是::
,但浏览器认为选择器是:
(将::first-line
看作:first-line
),这样它的格式就和伪类选择器一致了.提倡:
是为了向后兼容
::first-line
选择器
选择文本块的首行
<style>
p::first-line{
/* 选择p元素的第一行文字 */
width: 50em;
background: yellow;
}
</style>
<body>
<p>
Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
Life is short , I use Python . Life is short , I use Python . Life is short , I use Python .
</p>
</body>
- 即使页面改变大小导致文字错版 该样式也始终应用于第一行文字
::first-letter
选择器
选择文本块的首字母
- 注意是首个字母
:brfore
和:after
选择器
在选中元素的内容之前或之后插入内容
<style>
a:before{
content: "H";
}
a:after{
content: " !";
}
</style>
<body>
<a href="#">olleworld</a>
<a href="#">olleworld</a>
<a href="#">olleworld</a>
</body>
- 选择器内使用
content
属性,属性值为要插入的字符串
css计数器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css计数器</title>
<style>
body{
counter-reset: paracount;
}
P:before{
content: counter(paracount)".";
counter-increment: paracount;
}
</style>
</head>
<body>
<p>css计数器</p>
<p>css计数器</p>
<a href="#">css计数器</a>
<p>css计数器</p>
<p>css计数器</p>
</body>
</html>
- 要创建计数器,需要使用专门的
counter-reset
属性为计数器设置名称:counter-reset:paracount;
这行代码会初始化名为paracount
的计数器,将它的值设为1
;也可以指定其他初始值,在计数器后面添加一个数字即可:counter-reset:paracount 10;
- 如果想定义多个计数器,只需在同一条
counter-reset
声明中添加计数器名称就好了(也可以带上初始值),如:counter-reset:paracount 10 othercounter;
- 计数器初始化后就能作为
content
属性的值,跟:before
和:after
选择器一起使用来指定样式:content:counter(paracont)". ";
此条声明用在包括:before
的选择器中,其效果是将当前计数器的值呈现在选择器匹配的所有元素之前,此处还要在相应的值后追加一个句点和空格
- 计数器的默认表示为十进制整数,不过也可以指定其他数值样式:
content:counter(paracont,low-alpha)". ";
此处对计数器添加了参数lower-alpha
其功能是指定数值样式,这个参数可以是list-style-type
属性支持的任意值
counter-increment
属性专门用来设置计数器增量,该属性的值是要增加计数的计数器的名称:counter-increment:paracount;
计数器的增量为1
,也可以设置其他增量:counter-increment:paracount 2;