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

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>

此外，请注意，您也可以直接将任何 ancestor 元素作为目标，规则将在此处向下级联(目标 .profile 将目标 。 profile 以及嵌套在 .profile 中的所有内容，但不是 .profile< 的任何祖先或 sibling ):

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

这种增加的特异性也可用于表示当您有两个具有相同类或选择器的元素时，您只想将规则应用于特定元素(第二个 .这里的 name 没有父 .description，所以尽管 .name 是它的有效选择器，.description .name 不是):

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

<div class="wrapper">
  <div class="content">
    <div class="main">
      <div class="profile">
        <div class="description">
          <div class="name">Name One -- targetted</div>
        </div>
        <div class="name">Name Two - not targetted</div>
      </div>
    </div>
  </div>
</div>