CSS不会仅适用于其子代的ID

Question

我将以下代码应用于样式

<div id="headingGroup">
    <h2>Some Heading</h2>
    <h2>Some Heading</h2>
    <h2>Some Heading</h2>
</div>

我想对所有3个标题应用字体粗细和大小，我认为，如果给div一个id，我可以在CSS中调用该id并将样式应用于所有三个标题，如下所示

#headingGroup{
    font-weight: 100;
    font-size: 3rem;
}

但是h2不会改变，但是如果我直接按如下方式调用h2，则字体会发生变化

#headingGroup h2{
    font-weight: 100;
    font-size: 3rem;
}

然后应用样式并更改字体，为什么不能根据id进行样式设置？

这是我在Chrome中检查元素时看到的内容

看来h2类型被覆盖了吗？ id不是更具体，通常应该覆盖应用于h2的样式吗？

Answer 1

您的第一个代码段中发生的是var arr1 = ['1', '2', '3', '4']; var arr2 = ['2', '1', '4', '1']; for (var i = 0; i < arr1.length; i++) { if (arr1[i] > arr2[i]) { console.log(arr1[i]); } }样式已被浏览器的基础#headingGroup样式取代。

但是，对于CSS来说，通常最好的方法是不使用ID，甚至不使用根元素。原因是控制级联，以后覆盖样式或重用样式变得更加困难。

相反，创建一个可以直接将 应用于您的h2元素并在其他地方重用的类，如下所示：

CSS：

h2

HTML：

.sub-heading {
  font-weight: 100;
  font-size: 3rem;
}

如果您希望在顶级容器上使用单个类，则需要像在第二个示例中一样，应用特定性并设置<div id="heading-group"> <h2 class="sub-heading">Some Heading</h2> </div> 的样式。但是使用类仍然比根据您的ID设置样式更可取。考虑一下您以后如何将相同的样式应用于另一个块！例如：

CSS：

h2

HTML：

.heading-group h2 {
  font-weight: 100;
  font-size: 3rem;
}

Answer 2

编辑：正如更新前对评论的预测那样，浏览器默认将样式添加为h2。就像您在CSS代码上放了这个一样：

h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

---

让我们分解您的问题。 CSS的意思是Cascading Style Sheets，因此您应用于选择器的所有样式（此处为id）都将应用于其所有子级。 但是，您必须知道应用的样式始终是更强的样式。 [More to read here]

让我们尝试一些带有颜色更新的示例，以获得更好的视觉效果

1：在父级上放置样式效果很好：

#headingGroup {
  color: red;
}

<div id="headingGroup">
  <h2>Some Heading</h2>
  <p>I'm not a title</p>
</div>

2：父样式比当前对象样式更柳条

#headingGroup {
  color: red;
}
h2 {
  color: green; /* This will over pass the color red */
}

<div id="headingGroup">
  <h2>Some Heading</h2>
  <p>I'm not a title</p>
</div>

3。要绕过h2上的样式默认样式，您必须增加强度：

#headingGroup {
  color: red; /* Text inside headingGroup is red by default */
}
h2 {
  color: green; /* This will over pass the color red */
}
#headingGroup h2 {
  color: blue; /* This will overpass all color for h2 inside the group */
}

<p>I'm a text without style</p>
<h2>I'm not on headingGroup</h2>
<div id="headingGroup">
  <h2>Some Heading</h2>
  <p>I'm not a title</p>
</div>

Answer 3

您正在使用id_selectorthis ID选择器来选择一个唯一元素！要选择具有特定ID的元素，请写一个井号（＃），后跟该元素的ID。

您正在指定对h2进行更改（这是其中的一部分） div有id #headingGroup

 #headingGroup h2{
font-weight: 100;
font-size: 3rem;

}

Answer 4

添加类而不是ID。然后为此类定义CSS