我應該多久使用一次CSS中的孩子/兄弟選擇器？

-1

我正在與其他開發人員合作，並且儘可能地讓他們瞭解我在接管某個特定項目時編寫的HTML/CSS代碼。所以，我有這個簡單的片段。我應該多久使用一次CSS中的孩子/兄弟選擇器？

<section> 
<div class="twocolumn"> 
    <div> 
     <p>Hello</p> 
     <a href="#">Press</a> 
    </div> 
    <div> 
     <p>Nice one!</p> 
     <a href="#">Click</a> 
    </div> 
</div> 
</section>

要定位在該代碼，這是更好的做法內部元件，以使用從最外元件（部分）開始選擇器，使得另一顯影劑就會明白的元素作爲這樣的「排列」：

section > div div:nth-child(1) p + a { 
    ... 
}

，或者我應該作出這樣使用類：

.twocolumn a { 
    ... 
}

你認爲哪是更容易閱讀（其他開發商）？每個過程有什麼優點和缺點？你能舉出其他的例子嗎？

來源

2013-11-23 Nico Encarnacion

堅持更具體的選擇器。在這種情況下，它將是類名稱，因爲標籤嵌套深度可能會發生變化。 – WebChemist

選擇器與您的標記不同。因此無法比較。這兩個選擇器在這裏持有不同的含義。 –

首先，您的選擇器不相符。 .twocolumn a本身會匹配a元素，因爲您沒有指定只查看div:nth-child(1)。

撇開。請記住，CSS選擇器中的組合器的唯一目的是在標記中的兩個或多個元素之間建立關係。所以一個兄弟姐妹組合者說：「這個元素必須是一個跟隨它的兄弟姐妹」，後代組合子說「這個元素必須包含在那個中」，並且一個孩子組合子說「這個元素是那個孩子的一個孩子」。如果你不需要強制兩個元素之間的特定關係（通常這是來自你對頁面結構的假設），那麼你可能不需要在選擇器中指定很多元素。

以你比如段：如果你能保證該結構中的每一個內div有p後跟a，你可以離開了p +。你只需要它，如果a可以出現在其他地方，並且你想確保你只是直接跟在a之後，如果它直接跟在p之後。

接下來，如果你能保證某種程度上每section > div將有類.twocolumn，那麼你可以使用類選擇器。我覺得真的不太可能，因爲什麼類的名稱應該描述，但假設它是的話，那麼如果你要選擇的第一a只有你將需要div:nth-child(1)至少：

.twocolumn div:nth-child(1) a { 
    ... 
}

我可以」 t提供了更多的一般性建議，因爲它確實取決於您的要求以及您正在處理的內容。但我會說你應該保持平衡，即不要完全依賴標記的結構，儘可能使用類和ID來指向關鍵元素。正如在另一個答案中提到的，您希望避免將CSS和HTML緊密耦合，導致您必須更改選擇器以反映HTML結構中的任何潛在更改。

但是仍然會考慮結構中可能出現的一小組變化，例如上面提到的p + a示例，所以最終不會過度使用類和不必要地誇大標記。現在，Web應用程序非常動態，CSS爲您提供了一個合理有效的語法，所以不要害怕使用它，並教導其他人如何使用它。

來源

2013-11-23 03:39:32 BoltClock

簡答：從不。

好吧，從來沒有。你的選擇器越複雜，你的CSS代碼就越容易與HTML結合。更改HTML，然後您必須在CSS選擇器代碼中反映這些更改。每次更改都需要進行更多手動工作，以確保您的設計不會中斷。

理想情況下，您希望使用盡可能多的CSS類，只要您的級別不超過一個子級選擇器即可。最好使用>運營商來定位直接的孩子，而不是依靠祖先選擇器。

這是我的看法很明顯，但我一直在開發網站超過10年。一個很好的理念（我從中學到了很多東西）來自SMACSS。

請記住，它並不總是關於標記。在清理標記和理智的CSS代碼之間有一個盈虧平衡點。我剛剛發現，通過使用多個CSS類，您可以充分利用可重用性。

來源

2013-11-23 03:40:43 matsko

'「你的選擇器越複雜，那麼你的CSS代碼與你的HTML就越耦合。」'真實。最好讓您的圖層（PHP，HTML，CSS，JavaScript）儘可能分離。它們旨在成爲模塊化部件。 –

作爲一般的最佳實踐，不太具體的選擇器更好。在這種情況下，您可能不希望在.twocolumn div內定位每個<a>標記。更具體的選擇最有可能是最好的，這取決於你實際要做的事情。如果可能的話，您應該爲<a>標記添加一個類並且目標爲.twocolumn a.classname。

來源

2013-11-23 03:44:23

更具體的選擇器處理速度越快。

在這種情況下：

section > div {}

風格解析器將看元素及其直接父上。這是計算複雜的任務。

但是這一次

section div {}

在最壞的情況下將有O(d)複雜，其中d是DOM樹的深度。

來源

2013-11-23 03:46:54

我應該多久使用一次CSS中的孩子/兄弟選擇器？

回答

相關問題