如何选择具有某个类的元素？

My understanding is that using element.class should allow for a specific element assigned to a class to receive different "styling" than the rest of the class. This is not a question about whether this should be used or not, but rather I'm trying to understand how this selector is intended to work. From looking at a ton of examples on the internet, I believe the syntax is correct and do not understand why this is not working.

我的理解是，使用element.class应该允许分配给类的特定元素接收与类的其余部分不同的“样式”。这不是关于是否应该使用它的问题，而是我试图理解这个选择器是如何工作的。通过查看互联网上的大量示例，我相信语法是正确的，并且不明白为什么这不起作用。

Here is an example:

这是一个例子：

CSS:

CSS：

h2 {
    color: red;
}

.myClass {
    color: green;
}

h2.myClass {
    color: blue;
}

HTML:

HTML：

<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
    <h1>This header should be GREEN to match the class selector</h1>
    <h2>This header should be BLUE to match the element.class selector</h2>
</div>

4 个解决方案

#1

It should be this way:

它应该是这样的：

h2.myClass looks for h2 with class myClass. But you actually want to apply style for h2 inside .myClass so you can use descendant selector .myClass h2.

h2.myClass用类myClass查找h2。但实际上你想在.myClass中应用h2的样式，这样你就可以使用后代选择器.myClass h2。

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Demo

This ref will give you some basic idea about the selectors and have a look at descendant selectors

这个参考文献将为您提供有关选择器的一些基本概念，并查看后代选择器

#2

h2.myClass refers to all h2 with class="myClass".

h2.myClass指的是所有带有class =“myClass”的h2。

.myClass h2 refers to all h2 that are children of (i.e. nested in) elements with class="myClass".

.myClass h2指的是所有h2，它们是（即嵌套）元素的子元素，其class =“myClass”。

If you want the h2 in your HTML to appear blue, change the CSS to the following:

如果您希望HTML中的h2显示为蓝色，请将CSS更改为以下内容：

.myClass h2 {
    color: blue;
}

If you want to be able to reference that h2 by a class rather than its tag, you should leave the CSS as it is and give the h2 a class in the HTML:

如果你希望能够通过类而不是它的标记来引用h2，那么你应该保留CSS原样，并在HTML中为h2提供一个类：

<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>

#3

The element.class selector is for styling situations such as this:

element.class选择器用于样式化情况，例如：

<span class="large"> </span>
<p class="large"> </p>

.large {
    font-size:150%; font-weight:bold;
}

p.large {
    color:blue;
}

Both your span and p will be assigned the font-size and font-weight from .large, but the color blue will only be assigned to p.

您的span和p都将从.large中分配font-size和font-weight，但蓝色只会分配给p。

As others have pointed out, what you're working with is descendant selectors.

正如其他人所指出的那样，你正在使用的是后代选择器。

#4

h2.myClass is only valid for h2 elements which got the class myClass directly assigned.

h2.myClass仅对直接分配了类myClass的h2元素有效。

Your want to note it like this:

你想要注意这样：

.myClass h2

Which selects all children of myClass which have the tagname h2

选择myClass的所有标记名为h2的子项