CSS-偽類選擇器（未完待續。。。）

未東興發布于2019-08-02 14:18 / 1679人閱讀

摘要：滿足結果的為和，但是不匹配類名為，所以最后匹配結果為結果類名順序失效匹配每一級第三個標簽且標簽類名為的。匹配所有父級是的元素兄弟節點選擇器匹配所有緊接著元素之后的元素

子節點選擇器 :nth-of-type() && :nth-child()

:nth-of-type(n) 匹配父節點下同一級對應標簽的第n個節點 (:nth-last-of-type(n)反序)

:nth-child(n) 匹配父節點下同一級第n個子節點且子節點為對應標簽(:nth-last-child(n)反序)

值得注意的是：:nth-如添加了類名限制,查找時子節點的順序n不受類名限制影響，但查找到的結果受類名限制。

:nth-of-type() && :nth-child()區別


  第1-1個p元素
  
    第2-1個p元素
    第2-1個section元素
    第2-2個p元素
    第2-3個p元素
  
  第1-2個section元素
  第1-3個section元素
  第1-4個section元素
  第1-2個p元素
  第1-3個p元素

section > p, section > section {
  padding-left: 30px;
}
p:nth-of-type(2){
   color: red;
}
p:nth-child(2){
  background: red;
}
p.info:nth-of-type(2){
    
}

結果：p:nth-child(2) 無效

p:nth-of-type(2): 匹配父節點下的第二個是p的子節點
p:nth-child(2)：匹配父節點下第二個子節點同時第二個子節點為p

注意點

.foo:nth-of-type(2) {
  color: red;
}

效果：類名順序失效, 匹配每一級同一個類型的第二個標簽且類名為foo的。
滿足:nth-of-type(2)結果的為

2-2

和

，但是

不匹配類名為foo，所以最后匹配結果為

2-2

p.foo:nth-of-type(3) {
  color: red;
}

結果：類名順序失效, 匹配每一級第三個p標簽且p標簽類名為foo的。

div>p

匹配所有父級是

的

元素

兄弟節點選擇器 div+p

匹配所有緊接著

元素之后的

元素

云服務器 GPU云服務器 css選擇器基礎選擇器css css選擇 js css 加載器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53716.html

CSS札記（一）：CSS選擇器

一、語法規則選擇器{ 屬性1:屬性值1; 屬性2:屬性值2; ...... } /*注釋*/ 二、如何在html中應用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夾和HTML位于同一個目錄下） 2. 內部嵌入css /*css代碼*/ 3...

yzzz 2019-08-30 14:20 評論0 收藏0
CSS札記（一）：CSS選擇器

一、語法規則選擇器{ 屬性1:屬性值1; 屬性2:屬性值2; ...... } /*注釋*/ 二、如何在html中應用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夾和HTML位于同一個目錄下） 2. 內部嵌入css /*css代碼*/ 3...

孫淑建 2019-08-02 10:05 評論0 收藏0
記一次前端面試試水筆記

摘要：浪費青春話不多說，之前投的簡歷，有家公司忽然聯系說，想和我約個時間點電話面試。不了解自己的水平，永遠都會止步于眼前的安逸。電話面試流程面試官簡單介紹一下來意，然后先了解工作經驗，再問技術問題。最近換了個項目，現階段處于項目啟動階段，沒有開發任務，天天悠悠哉哉地都快把自己的本職忘了。浪費青春！！！話不多說，之前投的簡歷，有家公司HR忽然聯系說，想和我約個時間點電話面試。雖然這段時間一直...

shleyZ 2019-08-30 15:55 評論0 收藏0
記一次前端面試試水筆記

摘要：浪費青春話不多說，之前投的簡歷，有家公司忽然聯系說，想和我約個時間點電話面試。不了解自己的水平，永遠都會止步于眼前的安逸。電話面試流程面試官簡單介紹一下來意，然后先了解工作經驗，再問技術問題。最近換了個項目，現階段處于項目啟動階段，沒有開發任務，天天悠悠哉哉地都快把自己的本職忘了。浪費青春！！！話不多說，之前投的簡歷，有家公司HR忽然聯系說，想和我約個時間點電話面試。雖然這段時間一直...

張紅新 2019-08-23 14:43 評論0 收藏0