談談css的僞類和僞元素

前言

今天主要談談css的僞類和僞元素。

僞類和僞元素的了解

官方解釋

僞類一開始單單隻是用來表示一些元素的動态狀态，典型的就是連結的各個狀态(LVHA)。随後CSS2标準擴充了其概念範圍，使其成為了所有邏輯上存在但在文檔樹中卻無須辨別的“幽靈”分類。

僞元素則代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻并不實際存在于文檔樹中。

我自己的了解：

僞類，類，class是一個類，就類似class這樣，表示一些元素的狀态的，但是無須辨別的分類。

僞元素，就是一個元素，類似p标簽元素，等等，邏輯上存在，但是實際并不存在在文檔樹中。

另外一個簡單的了解和區分就是：

僞類前面是一個冒号，僞元素前面是兩個冒号。E:first-child 僞類，E::first-line為元素。

特殊情況::before 和 ::after 僞元素

before 和after是在元素前面和後面添加一些元素，是以是僞元素，CSS3選擇器中已經将其前面變為兩個冒号了。請看：w3cselect

問題來了，那麼為什麼我們平時用before和after前面就一個冒号？

當你看了css2選擇器就知道了，老的規範中，僞類和僞元素都用一個冒号，新規範為了區分，僞元素統一用兩個“：：”,是以，大家注意了，往後在寫css3的時候，為元素要用兩個冒号，僞類用一個冒号。

僞類和僞元素的應用

我之前的css常用效果，講了一些。

像僞元素

::-webkit-scrollbar

::selection

::-webkit-input-placeholder 

::after
           

等等。

僞元素中用的最多的要數::after和::before了

可以用這兩個僞元素做很多效果！

html

css

a {
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;
    color: #000;
    font-size: px;
    padding: px px;
}

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -px; }
a:hover::after { content: "\5D"; right:  -px; }
           

其中content中可以用attr也可以用url

例如：

a：:after { content:"(" attr(href) ")"; } 
h1::before { content: url(logo.png); }  
           

僞類中用的最多的要數：nth-child()選擇器了