何時使用CSS +標記

非常容易的問題。我一直在使用CSS一段時間，但很少使用+嘆爲我的代碼。任何人都可以解釋使用它的最佳時機嗎？我無法找到谷歌什麼...謝謝...百萬何時使用CSS +標記

2010-07-26 FlyingCat

我發現相鄰的兄弟選擇器是有用的，當你想申請speci對一系列元素的第一個元素進行造型。例如，如果你想從樣式，其餘的文章不同的第一段，你可以使用：

p { 
    /* styles for the first paragraph */ 
} 

p + p { 
    /* styles for all other paragraphs */ 
}

這可以取代在許多情況下使用class="first"。

編輯：使用first-child僞類對於這種特定情況會更好，因爲它支持更多種類的瀏覽器。（Thanks alex）

您可能還想調整某些元素在彼此相鄰時的位置。如果你有一個無序列表，看起來對自己很好，但在它的旁邊有一個段落上需要較少的填充，可以使用：

ul { 
    padding-top: 1em; 
    /* Default ul styling */ 
} 

p + ul { 
    padding-top: 0; 
    /* special styling for lists that come after paragraphs */ 
}

來源

2010-07-26 00:41:40 derekerdmann

這是最好的答案，到目前爲止，它實際上回答了這個問題（是最好的情況下）。 – 2010-07-26 00:44:44

第一個例子與'p：first-child {}'和級聯效果不一樣嗎？ – alex 2010-07-26 00:47:51

@alex - 是的，你說得對。對於跨瀏覽器的原因，「第一胎」實際上會更好。我只是總是忘記它存在。謝謝！ – derekerdmann 2010-07-26 00:56:48

這是Adjacent Sibling Selector

相鄰兄弟選擇有語法如下：E1 + E2，其中E2是主題的選擇器。選擇器匹配如果E1和E2共享文檔樹中的相同父代和E1緊接在E2, 之前忽略非元素節點（如文本節點和註釋）。

用較少的通用術語來說，它可以讓您選擇一個像普通的元素，但也可以限定它在同一級別之前有一個特定的元素。

例如這個HTML：

<p><div></div></p> 
<span></span>

你可以正常通過只是要求span選擇span，但是當有一個p之前，如果你只是想用某種風格來影響span您可以使用p + span。請注意，此處不能使用div + span，因爲div處於不同的「級別」。

來源

2010-07-26 00:41:00

在CSS2中還添加了直接相鄰組合器。例如，想象您想縮進除子標題（<h2>）之後的子文檔中的所有段落。第二條規則低於顯示了h2選擇使用加號作爲的組合子，表明聲明僅適用於p 緊跟h2結合與AP選擇：
p { text-indent: 0.5in; } 
h2 + p { text-indent: 0; } 

從 - http://www.xml.com/pub/a/2003/06/18/css3-selectors.html

來源

2010-07-26 00:41:28 jolt

，每當你想瞄準的下一個匹配的選擇使用它某個選擇器。例如。

<p>Item 1</p> 
<div>Item 2</div> 
<div>Item 3</div> 
<p>Item 4</p>

使用p + div將使你的風格項目2，因爲它p標籤後是正確的。 Example in action.

使用p + p不會有任何樣式，因爲下一個p標記不會緊挨着第一個標記。 Example in action.

使用div + p將使你的風格項目4，因爲它div後是正確的。 Example in action.

等等......

來源

2010-07-26 00:44:55

非常簡單的解釋:) – sachinjain024 2013-07-03 08:15:47

何時使用CSS +標記

回答

相關問題