我有一個 html-body，如以下代碼片段所示：div.element>h1, h2, p { color: red}.footer { background-color: blue}<html><body> <div id="1"> <div class="element"> <h1>Test 1</h1> <span>Link to interesting <a href="https://google.com">site A</a></span> </div> </div> <div id="2"> <div class="element"> <h2>Test 2</p> <span>Link to interesting <a href="https://google.com">site B</a></span> </div> </div> <div id="3"> <div class="element"> <h3>Dont color me red!</h3> <p>Test 3</p> <span>Link to interesting <a href="https://google.com">site C</a></span> </div> </div> <div class="footer"> <h2>This is my footer</h2> <p>Do not color this text red!</p> </div></body></html>現(xiàn)在我想將class=" element" 的“ div ”子級的所有“ h1 ”、“ h2 ”和“ p ”元素著色為紅色。這意味著 footer-div 中的“ h2 ”和“ p ”不應(yīng)該被涂成紅色，因為它們不是class="element"的div的子級。我知道我可以像下面這樣解決它，但有很多重復(fù)。div.element>h1, div.element>h2, div.element>p {}還有其他方法可以選擇具有不同標(biāo)簽的 div 的子級嗎？請注意，我不想要任何建議更改我的 html 文檔正文的答案。我只對 css 選擇器感興趣。我還需要能夠使用 querySelectorAll 在 JavaScript 中選擇它。
2 回答
慕田峪7331174
TA貢獻(xiàn)1828條經(jīng)驗 獲得超13個贊
如果您想使用querySelectorAll，就像您在第一個答案的評論中所說的那樣（您的問題中不清楚），那么解決方案是依次使用兩個querySelectorAlls 。
document.querySelectorAll('div.element').forEach(
el => el.querySelectorAll('h1, h2, p').forEach(
el => el.style.color = 'red'
)
);
.footer {
background-color: blue
}
<div id="1">
<div class="element">
<h1>Test 1</h1>
<span>Link to interesting <a href="https://google.com">site A</a></span>
</div>
</div>
<div id="2">
<div class="element">
<h2>Test 2</p>
<span>Link to interesting <a href="https://google.com">site B</a></span>
</div>
</div>
<div id="3">
<div class="element">
<h3>Dont color me red!</h3>
<p>Test 3</p>
<span>Link to interesting <a href="https://google.com">site C</a></span>
</div>
</div>
<div class="footer">
<h2>This is my footer</h2>
<p>Do not color this text red!</p>
</div>
div.element>h1, div.element>h2, div.element>p但到那時，在樣式表中使用可能會更直接。
MYYA
TA貢獻(xiàn)1868條經(jīng)驗 獲得超4個贊
在 vanilla CSS 中，您可以選擇元素內(nèi)所需的項目<div>，就像這樣
.element h1, .element h2, .element p {}如果你想要更簡潔、更整潔的 CSS 代碼，你可以隨時查看 SASS。
在 SASS 中它看起來像這樣：
.element {
h1, h2, p {
color: red
}
}您可以在這里找到 SASS： https: //sass-lang.com/
JS 中的選擇不會因為使用預(yù)處理器而改變。預(yù)處理器所做的就是允許您以某種方式編寫 CSS，然后將其轉(zhuǎn)換為普通 CSS 供瀏覽器讀取。
因此，如果你想通過JS以最干凈的方式選擇.element h1，.element h2，.element p，我會給這些特定元素一個類，例如“red”，然后在JS中使用這個類來選擇它們。
- 2 回答
- 0 關(guān)注
- 136 瀏覽
添加回答
舉報
0/150
提交
取消