css偽類選擇符

weixin_34249678發表於2018-09-08
CSS

css2

Element:link (僅用於a標籤)

IE6+
設定超連結a在未被訪問前的樣式
a:link {
  color: red;
}
...
<a href="#" >link</a>

Element:visited (僅用於a標籤)

IE6+
設定超連結a在其連結地址已被訪問過時的樣式
a:visited{
  color: green;
}
...
<a href="#" >visited</a>

Element:hover

IE7+
設定元素在其滑鼠懸停時的樣式
div:hover {
  color: blue;
}
...
<div>hover</div>

Element:active

IE8+
設定元素在被使用者啟用（在滑鼠點選與釋放之間發生的事件）時的樣式
div:active  {
  color: blue;
}
...
<div>active </div>

Element:focus (對應onfocus事件)

IE8+
設定物件在成為輸入焦點（該物件的onfocus事件發生）時的樣式
webkit核心瀏覽器會預設給:focus狀態的元素加上[outline]的樣式
div:focus  {
  color: red;
}
...
<input value="focus" />

Element:lang(zh-cn) (匹配使用特殊語言的E元素)

IE8+
匹配使用特殊語言的元素
...
p:lang(zh-cn) {
  font-size: 24px;
  color: green;
}
p:lang(en-us) {
  color: red;
}
...
<p lang="zh-cn">中文</p>
<p lang="en-us">English</p>

Element:first-child

IE7+
匹配父元素的第一個子元素
...
div:first-child {
  color: red;
}
...
<div>
  <p>color</p>
</div>

css3

Element:not(selector)

IE9+
匹配不含有selector選擇符的元素
...
p:not([lang="zh-cn"]) {
  color:red;
}
...  
<p lang="zh-cn">中文</p>
<p lang="en-us">English</p>

Element:root

IE9+
匹配元素在文件的根元素(HTML中，根元素是HTML)

Element:last-child

IE9+
匹配父元素的最後一個子元素
...
div:last-child {
  color: red;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:only-child

IE9+
匹配父元素（僅有一個子元素）
...
p:only-child {
  color: red;
}
...
<div>
  <p>color</p>
</div>
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:nth-child(add)

IE9+
匹配父元素的第n個子元素
...
div > p:nth-child(odd) { /* 奇數 odd/2n+1 */
  color: red;
}
div > p:nth-child(even) {/* 偶數 2n */
  color: green;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:nth-last-child(n)

IE9+
匹配父元素的倒數第n個子元素
...
div > p:nth-last-child(2) {
  color: red;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:first-of-type

IE9+
匹配同型別中的第一個同級兄弟元素
...
p:firs-of-type {
  color: red;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:last-of-type

IE9+
匹配同型別中的最後一個同級兄弟元素
...
p:last-of-type {
  color: red;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:only-of-type

IE9+
匹配同型別中的唯一的一個同級兄弟元素
...
p:only-of-type {
  color: red;
}
...
<div>
  <p>color></p>
</div>

Element:nth-of-type(n)

IE9+
匹配同型別中的第n個同級兄弟元素
...
p:nth-of-type(2) {
  color: red;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:nth-last-of-type(n)

IE9+
匹配同型別中的倒數第n個同級兄弟元素
...
p:nth-last-of-type(2) {
  color: red;
}
...
<div>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:empty

IE9+
匹配沒有任何子元素（包括text節點）的元素
...
p:empty {
  height: 30px;
  background-color: red;
}
...
<div>
  <p></p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
  <p>color</p>
</div>

Element:checked

Element:disabled

Element:target

相容瀏覽器版本
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0+/ 7.0+ /8.0+/9.0+ 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+

css2

@page:first

@page:left

@page:right

相關文章