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

我的理解是，使用 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>
207573 次浏览
小开

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 {
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

小开

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

Your want to note it like this:

.myClass h2

Which selects all children of myClass which have the tagname h2

小开

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

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

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

.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 class="myClass">This header should be BLUE to match the element.class selector</h2>
小开

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

<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.

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

小开

The CSS :first-child selector allows you to target an element that is the first child element within its parent.

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

提交答案