如何选择具有特定类别的元素？

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

这是一个例子：

CSS：

h2 {
    color: red;
}

.myClass {
    color: green;
}

h2.myClass {
    color: blue;
}

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>

应该是这样的：

h2.myClass在class上寻找h2 myClass。但是您实际上想在内部为h2应用样式，.myClass以便可以使用后代选择器.myClass h2。

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

演示版

该参考将为您提供有关选择器的一些基本概念，并介绍后代选择器

h2.myClass指的是所有h2有class="myClass"。

.myClass h2指的是所有h2元素（即嵌套在其中）的子元素class="myClass"。

如果希望h2HTML中的变成蓝色，请将CSS更改为以下内容：

.myClass h2 {
    color: blue;
}

如果您希望能够h2通过类而不是其标签来引用它，则应保留CSS并h2在HTML中提供一个类：

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

element.class选择器用于如下样式设置：

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

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

p.large {
    color:blue;
}

您的span和p都将从.large分配字体大小和字体粗细，但是蓝色仅分配给p。

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

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

您想这样记录：

.myClass h2

选择所有myClass具有标记名的子代h2

CSS:first-child选择器允许您定位作为父元素中第一个子元素的元素。

element:first-child { style_properties }
table:first-child { style_properties }