css相邻兄弟组合器 - 完成选择[重复]答案

【问题标题】：css adjacent Sibling combinators - complected selecting [duplicate]css相邻兄弟组合器 - 完成选择[重复]
【发布时间】：2017-09-03 10:10:17
【问题描述】：

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

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

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

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

</li>
</ul>

【问题讨论】：

你的问题不是很清楚，能不能说的详细点
我已经更新了问题并添加了类名以便更好地理解，抱歉造成混淆并感谢您的回复。
没有。 CSS有一个选择器用于“在另一个元素之后的元素”，但没有“在另一个元素之前的元素”。不要问我为什么。一种可能的解决方案是更改源中的顺序，并使用弹性框或定位做一些聪明的事情。
我知道没有 css 选择器 :D 但我认为做一些复杂的 css 定位我们可以做到这一点，你觉得呢？
你是在问如何选择标题类元素，即使父 ul 元素有 subnav 类？

标签： javascript jquery html css css-selectors

【解决方案1】：

我不确定 CSS 是否可行，但使用 jQuery 很简单：

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

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

【讨论】：

谢谢队友 :) 这个解决方案很好
对不起，我是个新手，我尝试定位没有任何类名的元素，但它不起作用
主 jQuery 调用的第二个参数表示正在查找第一个参数所表示的元素所在的元素。因此，您的“var”行应该如下所示：var $ul = $('a', $('.flexMenu-popup > li ul').parent()); 按照您的方式，您的选择器正在寻找 .flexMenu-popup > li ul inside of another .flexMenu-popup > li ul，它不存在。跨度>

【解决方案2】：

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

见下面的sn-p：

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

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

解决方案：但我认为您正在寻找可以通过以下规则的组合来完成：

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

见下面的sn-p：

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

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

【讨论】：

谢谢，但我实际上并没有使用颜色属性，我将使用位置/右/左/和内容 css 属性，我认为这不是我想要的解决方案；（。我想我必须使用简单的脚本来做到这一点。
是的，使用:before 伪元素是一个不错的选择。干杯！