Question

所以我想要选择<div>类.thisClass元素，而不选择类.thisClass的任何其他元素：

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

Answer 1

按类名和标记

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 {…}

不可
  .treecell-indented {…}

<强> BEST
  .hierarchy-deep {…}

Answer 2

使用JavaScript

document.querySelector('div.thisClass')

使用jQuery

$("div.thisClass")

使用CSS：

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

Answer 3

以下代码说明了如何从CSS和Javascript中的类列表中选择第一个类。

<强> CSS

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

<强> JAVASCRIPT：

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

如何通过css类选择特定元素，而不是其他元素？

3 个答案: