如果你是新的CSSer，您使用選擇器可能僅限于類名(class)，ID和一般的元素(tag)。事實上，總共有38 CSS選擇器，有些很複雜。
這裡用5個你可能不知道的 CSS選擇器，和他們的實用案例。
選擇器
類型
描述
foo:empty
結構性僞類
一個沒有子元素的foo元素
foo::first-letter 和
foo::first-line
僞元素
foo元素的第一個字母和第一行
foo:not(x)
僞類
排除x屬性後的所有foo元素
foo:lang(de)
僞類
一個應用德語的foo元素
foo:target
僞類
一個指向URI的目标foo元素
:empty
:empty僞類表示一個元素沒有子元素。空格，文本節點，或空的子元素都可以被認為是子元素，但不包括HTML注釋。:empty僞類可用于根據元素有無子元素而呈現不同的樣式。
一個例子，比如警報消息框。我們隻希望他們能夠在某些情況下出現，比如，當容器内有文本内容的時候就顯示，否則就隐藏，例如 –
::first-letter 和 ::first-line
而::first-letter 和 ::first-line僞元素代表元素中的第一個字母和第一行。特别要注意的是::first-line是響應式的。如你縮小和放大視口，第一行上的文本會相應的增加或者減少，這取決于文本的格式化。
正如你所期望的，他們在格式化文章時特别有用。 例如 –
:not(x)
:not僞類允許您選擇排除那些滿足一定條件的所有元素。這是非常有用的，因為它可以幫助我們避免編寫額外的CSS來覆寫通用樣式。
例如，我可能希望我的網站上所有的連結有下劃線，但排除我指定的那個樣式。通常情況下，我會寫 –
a {
text-decoration: underline;
}
a.no-underline {
text-decoration: none;
}
這樣做意味着帶有.no-underline的連結，沒有必要地應用它們的預設樣式。使用:not選擇器，可以避免這種額外的聲明 –
a:not(.no-underline) {
text-decoration: underline;
}
a.no-underline {
text-decoration: none;
}
另外，還有一個常用的案例，比如一個清單中，你希望第一項或最後一項做一些特殊處理，比如：
See the Pen :not僞類 by (@feiwen8772) on CodePen.dark
:lang
:lang僞類是目标元素已被定義為一個特定的語言。選擇這些元件，我們可以做很多事情。
1.添加有用的資訊和/或樣式。我們可以個性化頁面中的不同語言的段落，使之更加明确的給使用者，以及給這個段落添加有用的資訊。
2.使用特殊的引号。不同的語言使用不同的引号，在相關語言能夠使用語言原生的引号的時候是很有幫助的。
3.應用特殊字型。如果需要的話，我們也可以将選擇該語言更适合的字型或字型樣式。例如，在日語中，不适合使用斜體字來強調。相反，我們可以使用點的風格來強調。
See the Pen :lang僞類 by (@feiwen8772) on CodePen.dark
:target
:target僞類這裡不再說了，歡迎檢視《?:target 僞類使用技巧》https://www.html.cn/archives/6256