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：

＆＃13;

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

＆＃13;

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

＆＃13;

您正在使用的内容.ul-two li > a表示选择任何锚点，该锚点是列表项的子项，该列表项是任何无序列表的后代（不仅仅是子项）。通过在无序列表和列表项>之间添加子选择器.ul-two > li > a，您只能将后代限制为子项。

Answer 2

a下的.ui-three元素也在.ui-two下，因此您选择每个元素作为.ui-two的li元素子元素的第一个子元素。

尝试按如下方式使用选择器：

.ui-two > li > a

如何选择这个一般的兄弟姐妹？

2 个答案: