，是否有意義有多個ID，選擇屬性「＃ID1＃ID2 {...」

可能重複：
CSS inner id selectors ，是否有意義有多個ID，選擇屬性「＃ID1＃ID2 {...」

我遇到下面的CSS選擇器我覺得這不太合理。

#id1 #id2 .class1 { 
color: #fff; 
}

在我看來，該CSS選擇器將首先匹配的元素#id1，然後到元素#id2，再到元素之下，包括#id2有一類屬性設置爲class1。

我的直覺是，它是有效的CSS，而且它不需要指定#id1，或者如果它只是爲了匹配文檔時#id1有一個孩子#id2，但不能沒有父母匹配#id2#id1。

由於#id1的特異性爲0,1,0,0，而#id2的特異性爲0,1,0,0，而.class1的特異性爲0,0,1,0，所以得到0,2 ，1,0。但這是必要的還是有用的？看起來更有效的方法是創建兩個規則並分別通過每個ID進行選擇。

我似乎無法找到類似於#id1 #id2 ...的CSS選擇器的任何其他示例。

任何人都可以評論這個，並幫助給我一個理智檢查？

來源

2011-07-27 Anonymous

你的直覺是對的。嵌套ID選擇器可以在將樣式應用於其他文檔時過濾掉某些文檔中某些ID的元素。這完全是關於特異性。 – BoltClock

閱讀本文可能是幫助你如何在css中定義事物https://developer.mozilla.org/zh/Writing_Efficient_CSS – sandeep

謝謝@BoltClock。情景是相似的。感謝大家的評論。在我的情況下，我只是擔心有一個更明智的方式來做佈局，這樣你就不需要在'＃id1'中選擇一個'＃id2' ......也許這會是一些動態的佈局，但對我來說，選擇更直接的路線以達到所需的佈局將更爲明智。 – Anonymous

這選擇了class1類和一個祖先（包括父母）的編號爲id2的元素，該元素本身具有id1的祖先。所以你的解釋很接近，但是這不會選擇id2和class1的元素，除非它包含在另一個id2中。

如果你想要它包括id2你將不得不使用#id1 #id2.class1, #id1 #id2 .class1作爲選擇器。

如果你只是沒#id2 .class1，那麼你會選擇與class1類元素的元素裏面有id2不管id2元素是否處於id1。

所以這兩個選擇器有不同的含義。

來源

2011-07-27 05:52:10 Paulpro

感謝您的回覆。所以，我明白CSS語法是有效的，並且它只會在'＃id1'內選擇'＃id2'，但我不確定作爲開發人員選擇這種方式是否合理我會有一個更有效的佈局。認爲效率，明智的佈局。對？ – Anonymous

@匿名它幾乎不會影響效率，但它可以對頁面產生真正的影響，因爲它們具有不同的含義。考慮一個共享10個不同頁面的樣式表，其中所有10個頁面都有'＃id2'和'.class1'元素。但是'＃id2'只包含在其中一頁的'＃id1'中。那麼這種風格只適用於一頁，而不是全部10頁，這可能是期望的行爲。 – Paulpro

，是否有意義有多個ID，選擇屬性 「＃ID1＃ID2 {...」

回答

相關問題

，是否有意義有多個ID，選擇屬性「＃ID1＃ID2 {...」