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

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 :

Don’t qualify class rules with tag names

The previous concept also applies here. Though classes can be used many times on the same page, they are still more unique than a tag.

One convention you can use is to include the tag name in the class name. However, this may cost some flexibility; if design changes are made to the tag, the class names must be changed as well. (It’s best to choose strictly semantic names, as such flexibility is one of the aims of separate stylesheets.)

BAD
treecell.indented {…}

GOOD
.treecell-indented {…}

BEST
.hierarchy-deep {…}