Question

为深层嵌套的特定元素设置样式的正确方法是什么。

例如：

<div class="wrapper">
  <div class="content">
     <div class="main">
         <div class="profile">
            <div class="description">
                  <div class="name">John Doe</div>
            </div>
         </div>
     </div>
   </div>
</div>

如果我想将名称“ John Doe”加粗，请为每个选择器命名：

.wrapper .content .main .profile .description .name { font-weight:bold; }

还是直接像这样直接指定选择器：

.name { font-weight:bold; }

我对正确的编码方法感到困惑。谢谢您的宝贵时间！

Answer 1

否，您不需要需要引用每个父元素来定位嵌套元素；您只需定位元素本身即可（例如使用.name）：

.name {
  font-weight: bold;
}

<div class="wrapper">
  <div class="content">
    <div class="main">
      <div class="profile">
        <div class="description">
          <div class="name">John Doe</div>
        </div>
      </div>
    </div>
  </div>
</div>

此外，请注意，您也可以直接直接定位祖先元素中的任何一个，规则将在该元素上向下层叠（定位.profile将定位.profile 以及嵌套在.profile中的所有内容，但不是 .profile的任何祖先或兄弟姐妹）

.profile {
  font-weight: bold;
}

<div class="wrapper">
  <div class="content">
    <div class="main">Main (not bold)
      <div class="profile">Profile
        <div class="description">
          <div class="name">John Doe</div>
        </div>
      </div>
    </div>
  </div>
</div>

当您指定诸如.wrapper .content .main .profile .description .name之类的其他父元素时，您正在增加specificity。

当您有两个均针对同一元素的规则时，这将发挥重要作用，其中将应用最具体规则（在下文中，.name是有效的选择器，但.description .name的目标是相同的元素，并且更具体，因此.description .name会覆盖.name）：

/* This gets applied */
.name {
  color: red;
}

/* This gets applied and takes priority, as it is more specific */
.description .name {
  color: blue;
}

<div class="wrapper">
  <div class="content">
    <div class="main">
      <div class="profile">
        <div class="description">
          <div class="name">John Doe</div>
        </div>
      </div>
    </div>
  </div>
</div>

增加的特异性也可以用来表示当您具有两个具有相同类或选择器的元素时，您只希望该规则应用于特定元素（第二个{{1} }这里没有父.name，因此尽管.description是它的有效选择器，但.name 不是）：

.description .name

.description .name {
  font-weight: bold;
}

Answer 2

这取决于您要选择的唯一层次结构是否是示例中的层次结构。如果层次结构无关紧要，请仅使用一个类名（.name）。如果您想将选择范围限制为特定的层次结构（具体程度取决于您的情况），请继续阅读更多内容。选择器包含许多类名并不少见，每个类名甚至更深入层次结构。

但是，在查看您的代码时，我建议您提供一些标签ID而不是类名。 ID就像类名一样，但是它们在整个文档中都是唯一的（每个文档中可以/应该只有一个具有相同ID的元素）。在您的示例中，是否有多个.wrapper，.content和.main？可能不会。您可以自己判断，但是这类结构通常是唯一的，并且在文档中仅存在一次。

如果您给他们提供ID，则它们分别为#wrapper，#content和#main。

<div id="wrapper">
  <div id="content">
     <div id="main">
         <div class="profile">
            <div class="description">
                  <div class="name">John Doe</div>
            </div>
         </div>
     </div>
   </div>
</div>

如果您选择这样做，则可以摆脱选择器中的前三个类名。

.profile .description .name

将与以下相同：

#wrapper #content #main .profile .description .name

除非文档中的元素具有相同的类名，但不在您的#wrapper，#content和#main之外。

由您自己决定，但通常使用此类全局结构（例如main）ID而不是类名，因为它们往往是唯一的。

我是否需要指定每个选择器来设置嵌套元素的样式？

2 个答案: