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

Question

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

Answer 1

它应该是这样的:

h2.myClass用班级寻找h2 myClass.但是你实际上想要在h2中应用样式,.myClass这样你就可以使用后代选择器了.myClass h2.

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

演示

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

Answer 2

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>

Answer 3

element.class选择器用于样式情况,例如:

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

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

p.large {
    color:blue;
}

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

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