這些有用的CSS偽類通常被忽略

這篇文章在一定程度上鼓勵你在構建UI時使用更簡單的CSS和更少的JavaScript。

::first-line 選擇文本的第一行

這個選擇器用於選取指定選擇器的首行。如有如下HTML

<code>
<
body
>

  
<
h1
>
做工程師不做碼農
h1
>

  
<
p
>
如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。
  作者簡介：Web前端工程師，全棧開發工程師、持續學習者。
  私信回覆：大禮包，送某網精品視頻課程網盤資料，準能為你節省不少錢！
p
>

body
>
/<code>

css

<code> 
p
:first-line
 {
  
color
: lightcoral;
}/<code>

效果

::first-letter 選擇第一個字母

該偽選擇器適用於元素中文本的第一個字母。有如下代碼

<code>
<
body
>

  
<
h1
>
做工程師不做碼農
h1
>

  
<
p
>
我的網絡ID叫Dunizb
p
>

  
<
p
>
zuo gong cheng shi bu zuo ma nong
p
>

  
<
p
>
My best friend is Mickey
p 
>

body
>
/<code>

<code>
.innerDiv
 
p
:first-letter
 {
  
color
: lightcoral;
  
font-size
: 
40px
}/<code>

效果

::selection 選擇高亮的(選中的)區域

這個很好理解，就是平常我們鼠標選中文本時的樣式。

使用 ::selection 偽類選擇器，我們可以將樣式應用於突出顯示的區域。

<code>
div
::selection
 {
  
color
: yellow;
  
background
: red;
}/<code>

上面的代碼的效果就是：

:root 根元素

:root 偽類選擇了文檔的根元素。在HTML中，它始終是HTML元素。在RSS中，它是RSS元素。

這個偽選擇器最常用於使用CSS變量來存儲全局規則值，因為它適用於根元素。

:empty 匹配空項目

該偽選擇器將選擇沒有任何子項的任何元素，元素必須為空。如果元素沒有空格、可見內容或子代元素，則該元素為空。

<code>div:empty {
  border: 2px solid orange;
}
<
div
>
div
>

<
div
>
div
>

< 
div
>

div
>
/<code>

該規則將適用於空的div元素。該規則將適用於第一個和第二個div，因為它們確實是空的，而不是第三個div，因為它有空格。

關於 :empty 的更多詳細使用技巧，強烈推薦下面這篇文章

推薦閱讀：拒絕JavaScript，這三個CSS技巧你一定用的上​

:only-child 選擇唯一的子元素

選擇器匹配屬於其父元素的唯一子元素的每個元素。看如下HTML

<code>
<
div
>

  
<
p
>
這是一個段落。
p
> 

div
>


<
div
>

  
<
span
>
這是一個 span。
span
>

  
<
p
>
這是一個段落。
p
>

div
>


<
p
>
<
b
>
註釋：
b
>
Internet Explorer 不支持 :only-child 選擇器。
p 
>
/<code>

<code>
p
:only-child
 {
	
background
:
#ff0000
;
}/<code>

效果如下

:first-of-type 選擇指定類型的第一個子元素

與 :first-of-type 相同，但這會影響相同類型的最後一個子元素。

:nth-of-type(n) 選擇指定類型的子元素

該選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素。

n 可以是數字、關鍵詞或公式。

<code>
<
style
>
 
p
:nth-of-type(3n+0)
 {
	
background
:
#ff0000
;
}
style
>

<
body
>

  
<
h1
>
這是標題
h1
>

  
<
p 
>
第一個段落。
p
>

  
<
p
>
第二個段落。
p
>

  
<
p
>
第三個段落。
p
>

  
<
p
>
第四個段落。
p
>

  
<
p
>
第五個段落。
p
>

  
<
p
>
第六個段落。 
p
>

  
<
p
>
第七個段落。
p
>

  
<
p
>
第八個段落。
p
>

  
<
p
>
第九個段落。
p
>

body
>
/<code>

:nth-last-of-type() 選擇器相同，只是從最後一個子元素開始計數。

:link 選擇一個未訪問的超鏈接

此選擇器適用於尚未訪問的鏈接，這通常與帶有 href 屬性的 a 錨元素一起使用。

<code>a:link {
	color: orangered;
}
<
a
 
href
=
"/login"
>
Login
<
a
>
/<code>

這將使所有具有href屬性的錨元素（尚未單擊以訪問其href屬性中的頁面）具有橙色的文本。

:checked 選擇一個選中的複選框

如下所示，將匹配每個已被選中的 input 元素（只用於單選按鈕和複選框）。

<code>
input
:checked {
  border:  
2
px solid lightcoral;
}
"">
  <
input
 
type
=
"radio"
 checked=
"checked"
 value=
"male"
 name=
"gender"
 /> 選中的單選框

  <
input
 
type
=
"radio"
 value=
"female"
 name=
"gender"
 /> 單選框

  <
input
 
type
=
"checkbox"
 checked=
"checked"
 value=
"Bike"
 /> 選中的複選框

  <
input
 
type
=
"checkbox"
 value=
"Car"
 /> 複選框 
/<code> 

該規則適用於所有已單擊以選中它的複選框。

不過這個選擇器兼容性太差，只有 Opera 支持。

:valid 選擇有效的元素

這主要用於表單中的可視化表單元素，通過用戶設置的驗證。當驗證通過時，將使用 valid 屬性設置默認元素。

<code>
input
:valid
 {
  
boder-color
: lightsalmon;
}/<code>

:invalid 選擇一個無效的元素

與 :valid 相同，但這將適用於未通過驗證測試的元素。

<code>
input
[type=
"text"
]
:invalid
 {
  
border-color
: red;
}/<code>

:lang() 通過指定的lang值選擇一個元素

這適用於指定了語言的元素，可以通過以下兩種方式進行設置：

<code>
p
:lang(fr)
 {
  
background
: yellow;
}/<code>

或者

<code>p[lang|="fr"] {
  background: yellow;
}
<
p
 
lang
=
"fr"
>
段落 1
p
>
/<code>

:not() 取反

一個否定偽選擇器選擇非的東西，讓我們來看一個例子：

<code>.innerDiv :not(p) {
	
color
: lightcoral;
}
class
=
"innerDiv"
>
  
<
p
>
段落 1 
p
>

  
<
p
>
段落 2
p
>

  
<
div
>
Div 1
div
>

  
<
p
>
段落 3
p
>

  
<
div
>
Div 2
div
>

 
div
>
將選擇 Div 1 和 Div 2，因為它們不是 p 元素。
如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。
作者簡介：Web前端工程師，全棧開發工程師、持續學習者。
私信回覆：大禮包，送某網精品視頻課程網盤資料，準能為你節省不少錢！
收藏
舉報
 
杭州程序員小張/<code>