整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
让我们先看看W3的伪元素官方定义：
伪元素用来创建HTML文档语言指定之外文档树的抽象层。比如HTML没有提供文档元素内容的首字母或第一行的访问机制。CSS伪元素允许作者引用这些除此之外无法访问的信息。伪元素还提供一种方法来引用不存在于文档中的内容。（比如，::before 和 ::after ）。
一个伪元素由2个冒号（::）加上伪元素的名字所定义。
:: 标记是CSS2.1新规范中引入的，用来区分伪类（pseudo-classes）和伪元素（pseudo-elements）。但出于现有样式表兼容性原因，用户代理必须也能支持CSS1和CSS2中引入的单冒号伪元素标记（也就是说，:first-line, :first-letter, :before 和 :after）。但是CSS2.1及以后版本新引入的伪元素不支持这种兼容语法。
每个选择器中只能出现一个伪元素，并且只能出现在选择器主体的后面。
注意：后续版本可能会允许每个选择器中出现多个伪元素。
从上面的定义，我们可以得知伪元素事实上创建了一个虚拟的元素，在这个虚拟元素上可以应用一般CSS规则乃至伪类选择器。伪元素并不选定（过滤）元素，实际上它们选定（过滤）内容（::first-line,::first-letter）或创建内容（::before,::after，然后包装到一个虚拟容器中，作者可以为此容器添加样式。
尽管理论上使用JavaScript也可以获取第一行文本或第一个字母，但这高度依赖于当前使用的字体家族、字体大小、元素宽度，浮动元素等各种因素，显得相当繁琐。而通过CSS伪元素我们可以方便获得。文章最后提供了示例的访问地址。
例1 - 使用伪元素给文字自动添加语言说明后缀
CSS代码如下：
div:lang(zh){color:lime;background:#ff0;}
:lang(en) > span{color:#3111d3;}
HTML代码如下：
效果图如下：
本例使用伪类:lang来过滤lang属性为特定值（如en-us）的元素。
使用伪元素::after来给元素（文本）自动添加语言说明后缀。
通过本例，可以对伪类和伪元素的不同作用有个直观的认识。
例2 - 使用伪元素实现首行着色和段落投影
CSS代码如下：
HTML代码如下：
效果图如下：
本例使用伪类:lang来过滤lang属性为特定值（如en-us）的元素。
使用伪元素::after来给元素（文本）自动添加语言说明后缀。
例3 - 使用伪元素实现圆环图形
CSS代码如下：
HTML代码比较简单，就一行即可，如下：
<div class="circle"></div>
效果图如下：
注：伪元素默认是inline样式的，通过设置成绝对定位，可强制改变display为block，这样对其设置宽高才能生效。
本例使用伪类:after来实现内圆。
本头条号前面一篇文章《CSS 伪类：用来增强CSS选择器》和本篇文章内容分别讲述了伪类和伪元素的使用，我们应该已经大致理解了两者的异同点，这里再总结一下：
两者都不存在于HTML文档树中，都是为了支持依靠文档树之外的信息来进行格式化。
出于历史兼容性原因，一些在CSS2.1规范之前引入的伪元素使用和伪类一样的语法标记（单冒号:）。
伪类本质上和类相同，是用来选择过滤HTML元素的。只不过伪类是按动态特征过滤，而不是名称、属性或内容。
伪元素本质上和元素相同，是已有元素的某个部分或新创建的补充元素。伪元素上可以应用伪类选择器来过滤。
伪类可以出现在选择器的任何地方，而伪元素只能添加在最后一个简单选择器之后。
附：本文示例的网址：http://www.ikinsoft.com/3ddemo/pseudoelem.html
之前在搭建jumpserver的时候有用到了Guacamole，但是没有对Guacamole做一个详细的介绍，刚好在网上看到一篇Guacamole官方手册的翻译，所以整理了一些相关内容，下面介绍一下Guacamole的具体实现和架构。
Guacamole 是一个基于 HTML 5 和 JavaScript 的 VNC 查看器，服务端基于 Java 的 VNC-to-XML 代理开发。要求浏览器支持 HTML 5。目前该项目是 Apache 基金会的孵化项目。
该项目包含三个组件，分别是：
Guacamole 是无客户端的远程桌面网关，Guacamole 支持标准协议，比如 VNC 和 RDP。
Guacamole 不要求任何插件和客户端软件。
Guacamole 是提供远程桌面的解决方案的开源项目，通过浏览器就能操作虚拟机，适用于Chrome，Firefox，IE10等浏览器（浏览器需要支持HTML5）。 由于使用 HTML5，Guancamole 只要在一个服务器安装成功，你访问你的桌面就是访问一个 web 浏览器。
Guacamole不是一个独立的Web应用程序，而是由许多部件组成的。Web应用程序实际上是整个项目里最小最轻量的，大部分的功能依靠Guacamole的底层组件来完成。
用户通过浏览器连接到Guacamole的服务端。Guacamole的客户端是用javascript编写的，Guacamole server通过web容器（比如tomcat）把服务提供给用户。一旦加载，客户端通过http承载着Guacamole自己的定义的协议与服务端通信。
部署在Guacamole server这边的Web应用程序，解析到的Guacamole protocal，就传给Guacamole的代理guacd，这个代理（guacd）实际上就是解析Guacamole protocal，替用户连接到远程机器。
Guacamole protocal协议本身以及guacd的存在，实现了协议的透明：Guacamole客户端（浏览器运行的js）和Web应用程序，都不需要知道远程桌面具体用哪个协议（VNC,RDP etc）
Web应用程序是不知道任何远程桌面协议。应用程序不包含支持VNC,RDP等其他协议的Guacamole模块。应用程序只需要理解 Guacamole protocal协议，这个协议支持显示渲染和消息传输。尽管Guacamole protocal的这些功能与一个远程桌面协议类似，不过远程桌面协议和Guacamole protocal背后的设计原则是不一样的：Guacamole protocal并不是为了实现一个特定的桌面环境的远程功能。
Guacamole protocal作为一个远程显示和交互协议，实现了现有的远程桌面协议的超集（superset）。为了让Guacamole支持一个新的远程桌面协议 （比如RDP），需要写一个中间层（middle layer）来实现Guacamole protocal和这个新协议的转换。实现这样的转换机制和本地客户端远程访问桌面的实现没什么区别，唯一的不同是这个转换是要渲染远程的显示器（浏览 器），而不是本地客户端（比如real vnc）。
而实现这个协议互相转换的中间层就是guacd。
guacd是Guacamole的“心脏”，插件式的动态支持远程桌面协议，根据Web应用程序发来的指令连接到远程桌面。
guacd是和Guzcamole一起被安装到机器的，以驻留后台进程形式提供代理服务，接收来自Web应用程序的Tcp连接。guacd同样也不 知道具体的远程桌面协议，它只是需要决定加载那个插件并且传送特定的参数给插件。（这个插件就是用来解析具体远程桌面协议的）一旦这个插件被加载，插件就 独立于guacd运行，对Web应用程序和自己之间的会话（conmunication）具有绝对的控制权，直到插件被关闭。
在Guacamole中与用户打交道的就是Web应用程序。
之前说过，Web应用程序自己不实现任何的远程桌面协议。Web应用程序依赖guacd，只关心优美的界面以及权限认证。
Web应用程序用Java语言编写，对，只要你愿意，完全可以用其他语言实现。因为，事实上，Guacamole被设计成API，我们鼓励开发者使用API开发自己的应用。
说到Guacamole，一般是指一个远程桌面的网关，但是也不完全是这样。起初，Guacamole用javascript写了一个纯文本的Telnet客户端叫做：RealMint(RealMint是一个终端的名字)。这个项目主要是写了个示范程序，目的希望它能有用，它一度声名鹊起是因为RealMint是只用javascript写的。
RealMint的隧道是用PHP写的。跟Guacamole的HTTP的隧道相比，RealMint的隧道用的是简单的长轮询技术，比较低效。RealMint有一个比较像样的键盘实现是保存至今，被应用到Guacamole的键盘部分的代码，也许这就是RealMint唯一保留下来的功能和特性。
鉴于RealMint只是实现了一个古老的协议（telnet）,业界内还有几个其他的比较成熟稳定的javascript客户端模拟器的实现，RealMint这个项目就被遗弃了。
开发者一旦接触HTML5的canvas标签，就会发现这个标签Firefox和Chrome已经支持，而且开始替代哪些所谓的Javascript实现的VNC的客户端了。
完全用javascript实现的客户端加上java服务器的组件，工作原理是把VNC协议转化成一样的基于XML的版本。这样的实现受限于 VNC的特性，无法把一个连接传送给多个用户。概念上的项目需要很好的线上环境，虽然发展有点滞后，一个HTML5的VNC客户端已经在SourceForge上以“Guacamole”的名字注册了。
当Guacamole慢慢发展，变得不仅仅是一个概念上的产品时，需求快速增长，过去的像RealMint一样采取长轮询的XML的解决方案就慢慢被废弃了。
因为Websocket此时还无法被完全信赖，Java有没有Websocket的servlets标准，一个替代品，基于HTTP的隧道解决方案应运而生。
一个更快的基于文本的协议被提出，它可以支持现有的大多数的远程桌面协议，不仅仅是VNC。整个系统被重新设计成一个标准的后台驻留进程（guacd）和一些公用的库文件（libguac），可扩展地支持远程桌面协议。
这个项目从一个完整的VNC客户端扩展成一个高性能的HTML5远程桌面网关以及通用API。目前，Guacamole被用做一个中心网关，可以支持连接任意数量的，运行着不同远程桌面协议的机器。提供可扩展地认证体系，这样你可以做一些特定的适配，Guacamole也提供一个用户Html5远程 连接的通用API。
篇幅有限，关于Guacamole的内容就介绍到这了，后面会分享更多devops和DBA方面的内容，感兴趣的朋友可以关注一下~
开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个基于 JavaScript 的开源可视化图表库——Apache ECharts。
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅地运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
丰富的图表类型：提供开箱即用的 20 多种图表和十几种组件，并且支持各种图表以及组件的任意组合。
强劲的渲染引擎：Canvas、SVG 双引擎一键切换，增量渲染、流加载等技术实现千万级数据的流畅交互。
专业的数据分析：通过数据集管理数据，支持数据过滤、聚类、回归，帮助实现同一份数据的多维度分析。
优雅的可视化设计：默认设计遵从可视化原则，支持响应式设计，并且提供了灵活的配置项方便开发者定制。
健康的开源社区：活跃的社区用户保证了项目的健康发展，也贡献了丰富的第三方插件满足不同场景的需求。
友好的无障碍访问：智能生成的图表描述和贴花图案，帮助视力障碍人士了解图表内容，读懂图表背后的故事。
移动端优化：ECharts 针对移动端交互做了细致的优化，例如移动端小屏上适于用手指在坐标系中进行缩放、平移。
1 获取 Apache ECharts
Apache ECharts 支持多种下载方式，你可以根据项目的实际情况选择以下任意一种方式安装。
apache/echarts 项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。
https://github.com/apache/echarts/releasesnpm install echarts --save在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。
2 引入 Apache ECharts
在刚才保存 echarts.js 的目录新建一个 index.html 文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
</html>打开这个 index.html，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。
3 绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head> 之后，添加：
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>这样你的第一个图表就诞生了！
折线图
折线图堆叠
堆叠面积图
渐变堆叠面积图
北京 AQI 可视化
柱状图
堆叠柱状图
多 Y 轴
堆叠条形图
饼图
南丁格尔玫瑰图
嵌套环形图
地理坐标/地图
地图柱状图变形动画
关系图
人物关系图(环形布局)
NPM 依赖关系图
矩形树图
磁盘占用
旭日图
Drink Flavors
平行坐标系
AQI 分布（平行坐标）
营养结构（平行坐标）
散点矩阵和平行坐标
—END—
组件预览地址：https://echarts.apache.org/examples/zh/index.html
开源协议：Apache2.0
开源地址：https://github.com/apache/echarts
*请认真填写需求信息，我们会在24小时内与您取得联系。
