css ID通配符選擇器與兒童

Question

我不知道如何解釋這個，但我有以下情況。我有許多div的ID以「row」開頭，比如row1，row2等。它們都包含另一個div，它有一個名爲「element」的類。我想要做的是創建一個規則，所有這些「元素」的div所以我寫了這樣的事情：

[id*="row"] .element {width:0;} 

我的HTML是這樣的：

<div id="row1"> 
<div class="element"></div> 
</div> 
<div id="row2"> 
<div class="element"></div> 
</div> 
<div id="row3"> 
<div class="element"></div> 
</div> 

and so on... 

它沒有工作。你能告訴我什麼是錯的嗎？順便說一句，我不能只爲「元素」添加一條規則，因爲其他具有不同ID的div也有「元素」，並且應該有不同的樣式。

Answer 1

那麼實際上你的代碼工作正常。

看看這個：

<div id="row3"> 
<div class="element">three</div> 
</div> 
<div id="notARow"> 
<div class="element">three</div> 
</div> 

隨着

[id*="row"] .element {color: red} 

..並注意到ID與行是紅色的。

FIDDLE

有關屬性selecors更多信息 - 查看the spec

---

如果我猜爲什麼不爲你工作，我會說，這個問題是與特異性。

要檢查此問題，請右鍵單擊.element類之一的「檢查元素」，並查看您的屬性選擇器規則是否被更具體的規則劃掉/覆蓋。

Answer 2

您可以使用.element來選擇它們。另外，應該使用這些row div上的課程，那麼你不需要通過ID選擇。

像這樣：

<div id="1" class="row"> 
    <div class="element"></div? 
</div> 

等被選擇爲：

.row .element { 
} 

你只需要在另外的東西.element如果有衝突的元素用在該類您不想選擇的頁面。

如果這些是唯一的，而不是使用：

.elements { 
}