html - 如何选择这个一般的 sibling ？

Question

我只想选择 .ul-two li a。但是当我用这个选择器 .ul-two li > a 设置样式时，这也会影响 .ul-three a。我该怎么做？

<ul class="ul-one">
  <li>List 1
    <a href="#">dropdown 1</a>
    <ul class="ul-two">
      <li>lorem 2
        <a href="#">I want to only select this link</a>
        <ul class="ul-three">
          <li>lorem 2
            <a href="#">dropdown 3</a>
          </li>
        </ul>
      </li>
      <li>Lorem 2 2</li>
    </ul>
  </li>
</ul>

Answer 1

改用 .ul-two > li > a:

.ul-two > li >a {
  color: red;
}

<ul class="ul-one">
  <li>List 1
    <a href="#">dropdown 1</a>
    <ul class="ul-two">
      <li>lorem 2
        <a href="#">I want to only selected this link</a>
        <ul class="ul-three">
          <li>lorem 2
            <a href="#">dropdown 3</a>
          </li>
        </ul>
      </li>
      <li>Lorem 2 2</li>
    </ul>
  </li>
</ul>

您使用的 .ul-two li > a 意味着选择作为列表项子项的任何 anchor ，该列表项是后代(不仅仅是任何无序列表的 child )。通过在无序列表和列表项 .ul-two > li > a 之间添加子选择器 >，您将后代仅限于子项。