CSS偽類與偽元素選擇器區別

admin發表於2018-08-04
CSS

一.表現形式的不同:

偽元素選擇器前面有兩個冒號，當前用一個冒號也可以。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
#thediv::selection{
  color:white;
  background:red;
}

偽類選擇符必須是一個冒號才行，例如:

[CSS] 純文字檢視 複製程式碼
a:link{
  color:red;
}

二.實質上的區別：

之所以稱作為偽類選擇器，是因為作用域類選擇器類似。

可以認為，偽類選擇器為指定元素以類選擇器的方式設定樣式。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
input[type="text"]:disabled{
  border:1px solid #999;
  background-color: #fefefe;
}

可以認為給不可用文字框新增了一個樣式類設定其樣式。

而偽元素選擇器可以認為臨時給指定的內容外面包裹了一個元素。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:150px;
  height:100px;
  font-size:12px;
}
div::first-line{
  color:green;
}
</style>
</head>
<body>
<div>螞蟻部落歡迎您，只有努力奮鬥才會有美好的明天，分享互助是最大的進步動力</div>
</body>
</html>

將div第一行文字設定為綠色。

可以認為將第一行文字外面包裹了一個臨時元素。

然後給這個臨時元素設定樣式屬性，於是，稱它為偽元素選擇器也是理所當然。

相關文章