Question

在下面的代码中如何选择“title”类，但如果“subnav”类存在？

<ul class="flexMenu-popup">
<li>

    <a href="x" class="title">
    </a>

    <ul class="subnav">
    </ul>

</li>
</ul>

Answer 1

使用相邻的选择器（〜和+），只能选择跟随元素的兄弟姐妹。这意味着您可以选择a之后的ul，反之亦然。

请参阅下面的代码段：

＆＃13;

ul {
  border: 1px solid black;
  list-style-type: none;
}
.flexMenu-popup li > ul ~ a {
  color: red;
}

＆＃13;

<ul class="flexMenu-popup">
  <li>
    <a href="#">a tag</a>
    <ul>
      ul tag
      <li>
        <a href="#">a tag</a>
        <ul>ul tag</ul>
        <a href="#">a tag</a>
      </li>
    </ul>
    <a href="#">a tag</a>
  </li>
</ul>

＆＃13;

<强>解决方案：但我认为你所寻找的东西可以通过以下规则的组合来完成：

.flexMenu-popup li > a {
  color: red;
}
.flexMenu-popup li > ul ~ a {
  color: inherit;
}

请参阅下面的代码段：

＆＃13;

ul {
  border: 1px solid black;
  list-style-type: none;
}
.flexMenu-popup li > a {
  color: red;
}
.flexMenu-popup li > ul ~ a {
  color: inherit;
}

＆＃13;

<ul class="flexMenu-popup">
  <li>
    <a href="#">a tag</a>
    <ul>
      ul tag
      <li>
        <a href="#">a tag</a>
        <ul>ul tag</ul>
        <a href="#">a tag</a>
      </li>
    </ul>
    <a href="#">a tag</a>
  </li>
</ul>

＆＃13;

Answer 2

我不确定CSS是否可行，但jQuery非常简单：

var $ul = $('a.title', $('ul.flexMenu-popup > li > ul.subnav').parent());

if ($ul.length) {
    alert('yes');
}
else {
    alert('no');
}

css相邻的兄弟组合器 - 选择选择

2 个答案: