如何通過CSS類選擇特定的元素，但不是其他元素？

所以我要選擇具有類.thisClass的<div>元素，但沒有任何其他元素與類.thisClass：如何通過CSS類選擇特定的元素，但不是其他元素？

<div class="thisClass"></div> 
<p class="thisClass"></p>

來源

2016-02-01 davidchoo12

使用JavaScript

document.querySelector('div.thisClass')

使用jQuery

$("div.thisClass")

使用CSS：

<style> 
    div.thisClass{} 
</style>

來源

2016-02-01 12:47:10

@ SverriM.Olsen抱歉，但你能解釋一下你怎麼用鼠標意思？ –

隨着小的評論，這將選擇所有div與thisClass，如果有多個在您的網頁上。 –

爲什麼刻意用這麼多不相關的信息來回答答案？與此相關的唯一部分是「使用CSS」部分，但我必須跳過*兩個*整個代碼片段才能找到相關部分。爲什麼讀者比現在更難找到答案？（我敢打賭，這與@Sverri M. Olsen試圖創造的點是一樣的。） – BoltClock

CSS Selector類名和標記：div.thisClass { ... }：

div.thisClass { 
 
    background-color: red; 
 
}

<div class="thisClass">thisClass (div)</div> 
 
<p class="thisClass">thisClass (p)</p>

但是，這是一個bad way to write selectors：

不符合標記名稱班規

以前的概念也適用於此。雖然類可以在同一頁面上多次使用，但它們比標籤更獨特。

您可以使用的一種約定是在中包含標記名稱的類名。但是，這可能需要一些靈活性;如果對標籤進行了設計更改，則類名稱也必須更改。（這是最好的選擇嚴格語義的名稱，因爲這種靈活性是單獨的樣式表的目標之一。）

BAD
treecell.indented {…}

GOOD
.treecell-indented {…}

BEST
.hierarchy-deep {…}

來源

2016-02-01 12:49:04

請記住，鏈接頁面[編寫高效的CSS]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS）已有15年以上的歷史，選擇器和組合器效率提高 – andyb

@andyb我沒有提到性能。這個原則現在是實際的（選擇嚴格的語義名稱），例如參見[BEM方法論]（http://getbem.com）。 –

是的，我知道BEM，但是表現與選擇器有關，並在您的答案引用部分之後立即發出 - 「使用最具體的類別」。我主要想強調一下，鏈接頁面的所有部分都不是相關的，但我同意你的回答沒有提到性能，我的評論是誤導性的。 – andyb

-1

以下代碼說明如何從CSS和Javascript中的類列表中選擇第一個類。

CSS

.thisClass:first-child { 
    /*css property*/ 
}

JAVASCRIPT：

var divElement = document.getElementsByClassName('thisClass')[0];

來源

2016-02-01 12:53:20 Shashank

您正在使用的CSS選擇器可能不會工作，因爲在這兩者之前很可能還有其他元素。此外，JS解決方案未被請求 –

由於沒有給出完整的HTML，因此假定沒有具有相同類的前面的元素。這個解決方案是在測試之後給出的。我同意，JavaScript解決方案不是必需的，但它只是添加了後CSS解決方案。 – Shashank

如何通過CSS類選擇特定的元素，但不是其他元素？

回答

相關問題