Html 如何选择具有特定类的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16946878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I select an element that has a certain class?
提问by Carolyn
My understanding is that using element.classshould 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.
我的理解是 usingelement.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>
回答by PSL
It should be this way:
应该是这样的：
h2.myClasslooks for h2 with class myClass. But you actually want to apply style for h2 inside .myClassso you can use descendant selector .myClass h2.
h2.myClass寻找带有 class 的 h2 myClass。但您实际上想在内部为 h2 应用样式，.myClass以便您可以使用后代选择器.myClass h2。
h2 {
color: red;
}
.myClass {
color: green;
}
.myClass h2 {
color: blue;
}
Demo
演示
This refwill give you some basic idea about the selectors and have a look at descendant selectors
回答by ASGM
h2.myClassrefers to all h2with class="myClass".
h2.myClass指所有h2与class="myClass".
.myClass h2refers to all h2that are children of (i.e. nested in) elements with class="myClass".
.myClass h2指代所有h2带有class="myClass".
If you want the h2in your HTML to appear blue, change the CSS to the following:
如果您希望h2HTML 中的 显示为蓝色，请将 CSS 更改为以下内容：
.myClass h2 {
color: blue;
}
If you want to be able to reference that h2by a class rather than its tag, you should leave the CSS as it is and give the h2a class in the HTML:
如果你希望能够h2通过一个类而不是它的标签来引用它，你应该保持 CSS 原样，并h2在 HTML 中给出一个类：
<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>
回答by Andrew Clody
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 分配字体大小和字体粗细，但蓝色只会分配给 p。
As others have pointed out, what you're working with is descendant selectors.
正如其他人指出的那样，您正在使用的是后代选择器。
回答by RienNeVaPlu?s
h2.myClassis only valid for h2elements which got the class myClassdirectly assigned.
h2.myClass仅对直接分配h2类的元素有效myClass。
Your want to note it like this:
你想像这样记下它：
.myClass h2
Which selects all children of myClasswhich have the tagname h2
选择所有myClass具有标记名的孩子h2
回答by Sreekumar P
The CSS :first-childselector allows you to target an element that is the first child element within its parent.
CSS:first-child选择器允许您定位一个元素，该元素是其父元素中的第一个子元素。
element:first-child { style_properties }
table:first-child { style_properties }
