僞類選擇器 僞元素選擇器_僞類選擇器簡介

僞類選擇器 僞元素選擇器

我們将在本文中更具體地讨論僞類的主題！ 首先，您可能會問什麼是僞類。 它們是CSS語言的關鍵字，可讓您與外部因素或事件進行互動，例如将滑鼠移到元素上或通路連結。 我們不會在這裡介紹所有的僞類，但是在閱讀了本文之後，您就會明白這一點！ 這些僞類背後的主要思想是它們以CSS語言公開事件，這意味着更易于與網頁上HTML元素進行互動。

讓我們從一些例子開始！

:active

該僞類充當Click事件，并在每個元素上使用。

例：

p :active { 
  background-color : red; 
} 
           

說明：單擊該元素時，背景變為紅色。

::after

您可以在元素後的html中插入一些内容。 最好看一個例子來了解。

例：

p ::after { 
  content : "insert here" ; 
  color : red; 
}
           

::before

此類的行為類似于:: after，但另一方面，它是在元素之前插入内容。

例：

p ::before { 
  content : "insert here" ; 
  color : red; 
}
           

::first-line

在女巫上選擇文本的第一行，即可應用屬性。

例：

p ::first-line { 
  color : red; 
}
           

::first-letter

選擇文本的第一個字母。

例：

p ::first-letter { 
  color : red; 
  font-size : 2rem ; 
}
           

:first-child

這很有趣，因為正在選擇其父級的第一個元素。

例：

.class :first-child {
  color :red;
}
           

更有趣的是，您可以更具體地選擇特定類型的第一個孩子。 例：

.class p :first-child {
  color :red;
}
           

這将選擇.class中類型為<p>的第一個元素

從現在起您已經有了主意。 有關更多僞類，請參考本頁 。

有用的連結

如果您想學習并找到一份工作，我會參考Microverse頁面。 在這裡，您将獲得所有幫助和工具，以開始學習并成為Full Stack Developer。

對于本文，我從www.w3schools.com獲得了啟發。

您可以在Twitter上找到我| Github | 領英

翻譯自: https://hackernoon.com/introduction-to-pseudo-class-selectors-ce2b369r

僞類選擇器 僞元素選擇器