88

我的理解是，使用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>
4

5 回答 5

112

应该是这样的：

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

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

演示

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

于 2013-06-05T18:08:00.643 回答
63

h2.myClass指所有h2带有class="myClass".

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

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

.myClass h2 {
    color: blue;
}

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

<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>
于 2013-06-05T18:09:50.377 回答
15

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。

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

于 2013-06-05T18:55:40.683 回答
2

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

你想这样记：

.myClass h2

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

于 2013-06-05T18:08:18.253 回答
1

CSS:first-child选择器允许您定位一个元素，该元素是其父元素中的第一个子元素。

element:first-child { style_properties }
table:first-child { style_properties }
于 2020-05-13T14:47:16.037 回答