選擇器、僞類、僞類選擇器

參考W3C手冊：http://www.w3school.com.cn/cssref/css_selectors.asp

 

選擇器：

*{...} //通配符選擇器，通常用來設置全局統一的樣式
body html div ul ... //元素選擇器，會統一修改該層級以及該層級如下的全部相同的元素
.box //類名選擇器
#father //ID選擇器
#father>div //選擇父元素id是father 的全部div元素 （只選擇一代）
#father div //選擇父元素id是father 的全部div元素 （全部的後代元素）
...

 

僞類：（選擇器 後面接 一個 冒號 的是僞類）

　　僞類實際上是彌補了CSS選擇器的不足，用來更方便地獲取信息。

　　dom:

<div id="father">
    <div class="box"></div>
    <p></p>
</div>

 

　　css:

.box:hover
.box::after{ //在元素以後添加內容。 css2
　　content: " " //僞類沒顯示，加上這個屬性。以後就正常寫樣式。
}

.box::before //在元素以前添加內容。 css2
.box:first-letter //向文本的第一個字母添加特殊樣式 css1
.box:first-line //向文本的首行添加特殊樣式 css1
.box:first-child //#father 下的第一個 class叫box的元素 css2
p:last-child //選擇屬於其父元素最後一個子元素每一個 <p> 元素。 css3
p:only-child //選擇屬於其父元素的惟一子元素的每一個 <p> 元素。 css3
p:first-of-type // 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。 css3
.box:nth-child(odd) // 等同於 nth-child(2n+1) 奇數行
.box:nth-child(even) // 等同於 nth-child(2n) 偶數行
...//更多請參考第一行的連接

 

僞類選擇器：（選擇器 後面接 兩個 冒號 的是僞類選擇器）

　　而僞元素本質上是建立了一個虛擬容器(元素)，咱們能夠在其中添加內容或樣式。

ul::-webkit-scrollbar{...} //設置滾動條的樣式
...

 

 

:before，after和其餘僞元素添加

 

div:nth-of-type(2)::before{
    /*必須添加content屬性，不然後期不可見*/
    content: "";
    /*默認是行級元素，若是想設置寬高，就必須轉換爲塊級元素*/
    position: absolute;
    width: 20px;
    height: 20px;
    
    border-radius: 10px;
    left: -10px;
    top: -10px;
}
div:nth-of-type(2)::after{
    /*必須添加content屬性，不然後期不可見*/
    content: "";
    /*默認是行級元素，若是想設置寬高，就必須轉換爲塊級元素*/
    position: absolute;
    width: 20px;
    height: 20px;
    
    border-radius: 10px;
    left: -10px;
    bottom: -10px;
}

/*獲取第一個字符：實現首字下沉*/
p::first-letter{
    color: red;
    font-size: 30px;
    float: left;/*文本環繞*/
}

/*獲取第一行內容:若是設置了::first-letter,那麼沒法同時設置它的樣式*/
p::first-line{
    text-decoration: underline;
}

/*設置當前選中內容的樣式*/
p::selection{
    
    color: red;
    /*它只能設置顯示的樣式，而不能設置內容大小*/
    /*font-size: 30px;*/
}

---

在CSS中總有一些你不用不知道，用到才知道的「坑」。好比今天要談的，把 before, after 僞類用在 <img> 標籤上。

嗯，實際上你用你會發現，在大多數瀏覽器這是無效的，dom中並不會出現你想要的結果。

爲何會這樣呢？
讓咱們迴歸到 W3C 標準中尋覓一下，在標準中，before, after 僞類的定義如：

As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.
來自 https://www.w3.org/TR/CSS21/generate.html#before-after-content

咱們應該注意到所謂 document tree content，對於 img 這種自閉和標籤，彷佛不存在 content （內容或後代元素）在標籤中，因此選擇器沒有生效。但這樣的解釋還不夠清晰，實際上標準中還有一行註釋：

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

嗯，這回清楚了，對於可替換元素（如 img、input、select 等），標準並無清晰定義，這也致使了瀏覽器實現的差別性。