国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

:first-child 選擇器的目的是，如名稱所示，選擇父標(biāo)記的第一個(gè)子標(biāo)記。所以這個(gè)例子是可行的（剛剛在這里嘗試過）：

    
first
    
second

但是，如果您將標(biāo)簽嵌套在不同的父標(biāo)簽下，或者您的 red 類標(biāo)簽不是父標(biāo)簽下的第一個(gè)標(biāo)簽，則此方法不起作用。

還請(qǐng)注意，這不僅適用于整個(gè)文檔中的第一個(gè)此類標(biāo)記，而且每次都有新的父級(jí)標(biāo)記圍繞它時(shí)，例如：

    
first
    
second


    
third
    
fourth

first 和 third 將為紅色。

對(duì)于您的情況，您可以使用 :nth-of-type 選擇器：

.red:nth-of-type(1)
{
    border:5px solid red;
} 

    blah
    
first
    
second
    
third
    
fourth

這是作者誤解 :first-child 如何工作的最著名的例子之一。 CSS2中引入，:first-child偽類代表其父母的第一個(gè)孩子。就是這樣。有一個(gè)非常常見的誤解，即它會(huì)選擇第一個(gè)與復(fù)合選擇器其余部分指定的條件相匹配的子元素。由于選擇器的工作方式（請(qǐng)參閱這里 進(jìn)行解釋），這根本不是真的。

選擇器級(jí)別 3 引入了 :first-of- type 偽類，表示其元素類型的兄弟元素中的第一個(gè)元素。 這個(gè)答案圖文并茂地解釋了 :first-child 和 :first-of-type 之間的區(qū)別。但是，與 :first-child 一樣，它不會(huì)查看任何其他條件或?qū)傩?。?HTML 中，元素類型由標(biāo)簽名稱表示。在問題中，該類型是 p。

不幸的是，沒有類似的 :first-of-class 偽類來匹配給定類的第一個(gè)子元素。在首次發(fā)布此答案時(shí)，新發(fā)布的 FPWD選擇器級(jí)別 4 引入了 :nth-match() 偽類，它是圍繞現(xiàn)有選擇器機(jī)制設(shè)計(jì)的，正如我在第一段中提到的，通過添加選擇器列表參數(shù)，您可以通過它提供其余的選擇器復(fù)合選擇器以獲得所需的過濾行為。近年來，此功能納入 :nth-child( ) 本身，選擇器列表作為可選的第二個(gè)參數(shù)出現(xiàn)，以簡(jiǎn)化事情并避免 :nth-match() 在整個(gè)文檔中匹配的錯(cuò)誤印象（請(qǐng)參閱下面的最后注釋） .

當(dāng)我們等待跨瀏覽器支持時(shí)（說真的，已經(jīng)過去近 10 年了，并且在過去 5 年中只有一個(gè)實(shí)現(xiàn)），這是一種解決方法 Lea Verou 和我獨(dú)立開發(fā)（她先做的！）是首先將您想要的樣式應(yīng)用到該類的所有元素：

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

...然后使用覆蓋規(guī)則中的通用同級(jí)組合器 ~：

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

現(xiàn)在只有第一個(gè)帶有 class="red" 的元素才會(huì)有邊框。

以下是如何應(yīng)用規(guī)則的說明：

.home > .red {
    border: 1px solid red;
}

.home > .red ~ .red {
    border: none;
}

  blah         
  
first
  
  
second
 
  
third
  
  
fourth