css3新增选择器(1)
这些添加伪类上呈现的内容,不会出现在dom中,不会改变文档内容,不可复制,仅仅在css渲染层加入。
content是必写属性,就算写空值也要写
content属性可以写:
(1)string字符串
<p class="tt">百度</p>
css样式:
.tt::before {
content: "《";
color: red;
}
.tt::after {
content: "》";
color: red;
}
.tt,
.t2 {
font-size: 20px;
line-height: 50px;
text-align: center;
}
代码演示:
(2)通过attr()调用当前元素的属性,把取到的值显示在页面上
通过伪类在超链接标签的一前一后显示你要呈现的内容
<p> <a href="hhtps://www.baidu.com" title="www" class="t2">百度</a> </p>
css:
.t2::before{ content: "(" attr(href) ")"; color:aqua; }
.t2::after{ content: "(" attr(title) ")"; color:pink; }
代码演示:
3)url/uri()引用媒体文件
<p> <a href="hhtps://www.baidu.com" class="t3">百度一下</a> </p>
css:
.t3::before{ content: url(https://www.baidu.com/img/flexible/logo/pc/result.png); }
.t3::after{ content: "(" attr(href) ")"; }
代码演示:
(4)调用计数器,可以不使用列表元素实现序号功能。
配合counter-increment和counter-reset属性使用:
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
<div class="t4">
<h1>三国演义</h1>
<h2>第一章</h2>
<h2>第二章</h2>
<h2>第三章</h2>
</div>
css:
body {
counter-reset: section;
}
.t4 h1 {
counter-reset: subsection;
}
.t4 h1::before {
counter-increment: section;
content: counter(section)"、";
}
.t4 h2::before {
counter-increment: subsection;
content: counter(section)"."counter(subsection)"、";
}
.t4 h1,
.t4,
h2 {
font-weight: normal;
}
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果