css3为了区分伪类和伪元素，伪元素采用双冒号写法。
常见伪类 :hover,:link,:active,:target,:not(),:focus。
常见伪元素 ::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。
比如：有些网站的联系电话，希望在它们前加一个icon，就可以使用:before伪元素，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ui::before {
content:'\260E';
font-size: 15px;
}
</style>
</head>
<body>
<div class="uu">
<p class="ui">13977011111</p>
</div>
</body>
</html>
注意：这些特殊字符的html，js和css的写法是不同的，具体可查看html特殊字符的html，js，css写法汇总。
二、content属性
::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。
content可取以下值。
1、string
使用引号包一段字符串，将会向元素内容中添加字符串。如：a:after{content:""}
比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p::before{
content: "《";
color: blue;
}
p::after{
content: "》";
color: blue;
}
</style>
</head>
<body>
<div class="uu">
<p class="ui">content属性和用法</p>
</div>
</body>
</html>
2、attr()
通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a::after{
content: "(" attr(href) ")";
}
</style>
</head>
<body>
<div class="uu">
<a href="https://www.qiquanji.com/">期权记</a>
</div>
</body>
</html>
3、url()/uri()
用于引用媒体文件。
例如：“期权记”前面给出一张图片，后面给出href属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a::before{
content: url("https://www.qiquanji.com/data/img/dmj/201903021551541417148425.jpg");
}
a::after{
content:"("attr(href)")";
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div class="uu">
<a href="https://www.qiquanji.com/">期权记</a>
</div>
</body>
</html>
调用计数器，可以不使用列表元素实现序号功能。
配合counter-increment和counter-reset属性使用：
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
counter-reset: section;
}
h1{
counter-reset: subsection;
}
h1:before{
counter-increment:section;
content:counter(section) "、";
}
h2:before{
counter-increment:subsection;
content: counter(section) "." counter(subsection) "、";
}
</style>
</head>
<body>
<h1>Html/Css</h1>
<h2>........</h2>
<h2>........</h2>
<h2>........</h2>
<h1>JavaScript</h1>
<h2>........</h2>
<h2>........</h2>
<h1>jQuery</h1>
<h2>........</h2>
<h2>........</h2>
</body>
</html>
三、使用
1、清除浮动
清除浮动方法有多种，现在最常用的就是下面这种方法，仅需要以下样式即可在元素尾部自动清除浮动
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
2、模拟float:center的效果
float没有center这个取值，但是可以通过伪类来模拟实现。
这个效果实现很有意思，左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。
核心css如下：
#page-wrap { width: 60%; margin: 40px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; }
完整代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 14px/1.8 Georgia, serif;
}
#page-wrap {
width: 60%; margin: 40px auto; position: relative;
}
#logo {
position: absolute; top: 0; left: 50%; margin-left: -125px;
}
#l, #r {
width: 49%;
}
#l {
float: left;
}
#r {
float: right;
}
#l:before, #r:before {
content: ""; width: 125px; height: 250px;
}
#l:before {
float: right;
}
#r:before {
float: left;
}
</style>
</head>
<body>
<div id="page-wrap">
<img src="https://www.qiquanji.com/data/img/dmj/201905221558499406355729.jpg" id="logo">
<div id="l">
<p>
随着业务需求的快速发展变化，需求不断增长，迫切需要一种更加快速高效的软件交付方式。微服务可以弥补单体应用不足，是一种更加快速高效软件架构风格。单体应用被分解成多个更小的服务，每个服务有自己的独立模块，单独部署，然后共同组成一个应用程序。把范围限定到单个独立业务模块功能。分布式部署在各台服务器上。本篇我们将介绍如何使用.NET Core打造自己的微服务架构。
Linux是一个多用户、多任务的操作系统，如果要使用系统资源，就必须向系统管理员申请一个用户，通过这个用户进入系统，通过建立不同属性的用户实现不同的作用或权限，可以合理利用和控制系统资源。
我们生成jQuery实例对象后，就可以使用原型上的css(), html()等方法，这就体现了原型继承：由构造函数生成的实例对象，可以继承构造函数的原型对象上的属性和方法。
最近重新开始学习js，在第一章的一个小节里写到了“脚本调用策略”，书上写的这部分不多，但是发现在我之前的（笔）面试中，问到的频率还是比较高的。自己一直习惯于直接把所有js文件写在head里，后来了解到优化后，会把js放在最底部，但并不太懂这样做的好处，而且其他的一些处理方式，自己也并未有过实际的操作。
对实时性要求比较高的场景，使用数据库的分区分表分库。
对实时性要求不高的场景，可以考虑使用索引库(es/solr)或者大数据hadoop平台来解决(如数据分析，挖掘，报表等)或者混合使用(如es+hbase/mongodb)。
当数据量特别大的时候，我们对生产端限流肯定是不科学的，因为有时候并发量就是特别大，有时候并发量又特别少，我们无法约束生产端，这是用户的行为。所以我们应该对消费端限流，用于保持消费端的稳定，当消息数量激增的时候很有可能造成资源耗尽，以及影响服务的性能，导致系统的卡顿甚至直接崩溃。
</p>
</div>
<div id="r">
<p>
在这本使用LDAP的Spring Security快速指南中，我们学习了如何使用LDIF配置基本系统并在spring security配置LDAP。
我们之前将敏捷方法与传统的瀑布流方法进行了比较。敏捷这种软件开发领域的项目管理办法，在过去数年有着强劲的发展势头。它解决了产品需求与开发等方面的不确定性。与之相较的瀑布流方法则试图将项目生命周期的各阶段，即启动、计划、执行和收尾等，按照严格的结构顺序进行组织。
你是在分岔口的操作员。当你听到列车来了，你没办法知道这两条路哪一条是正确的。然后呢，你让列车停下来，问列车员哪条路是对的，然后你才转换铁路方向。
之所以叫自制而不叫自研，因为真的没有多少可以称之为研究的东西，完全是拼凑而成。自制的这个driver本身没有多少技术含量，但是需要深入了解docker的运行原理和底层的存储方式，然后寻找一种恰当的方式来解决它。
这可以说是富文本技术实现的麻烦之处(难点)。玩过富文本技术的同学，肯定会想到“document.execCommand()”这个大名鼎鼎的对象。目前市面上的富文本基本都是基于这个对象打造。比如对选区执行一个加粗修饰，你可以直接调用“document.execCommand('bold')”。该API会将用户选择的文本都加上一个"strong"标签。
</p>
</div>
</div>
</body>
</html>
3、做出各种图形效果
例如：一个六角星
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#dd {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#dd::after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
</head>
<body>
<div id="dd"></div>
</body>
</html>
#dd的div是一个正三角行，#dd::after是一个倒三角形，通过绝对定位，调整其位置即可实现六角星的效果。
原文链接：https://www.qiquanji.com/post/8692.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知