整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
讓我們先看看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小時內與您取得聯系。
