如何选择<a> tag that has a sibling <ul> tag after it in CSS?</ul></a>

Question

HTML就像这样：

<ul>
    <li>
        <a>Menu 1</a>
    </li>
    <li>
        <a>Menu 2</a>
        <ul>
            <li>Sub menu 2</li>
        </ul>
    </li>
    <li>
        <a>Menu 1</a>
    </li>
</ul>

如何使用纯CSS选择其后具有兄弟<a>标记的<ul>代码？

（在上面的例子中，它将是<a>Menu 2</a>。）

Answer 1

不幸的是，我认为你不能。

• CSS 2包含adjacent sibling selector (+)，允许您选择紧跟其他元素的元素。

  E.g。 a + ul会选择包含文字“子菜单2”

的<ul>

• CSS 3包含general sibling selector (~)，它允许您选择一个跟随另一个元素的元素，即使它们之间有元素。

  E.g。 a + ul会选择包含文字“子菜单2”的<ul>，即使<span>和<a>之间有<ul>

  < / LI>

但是没有一个选择器可以让你选择一个具有跟随的元素的元素。

Answer 2

可能是通过n-child

ul li:nth-child(2) a { color:#009; }

选择第二个列表项，然后选择后续锚标记。

DEMO HERE

Answer 3

这是一个jsFiddle文件，您可以参考LINK

<强> CSS

ul > li > a {color:red}

ul > li > ul  {color:blue}​

<强> HTML

<ul>
    <li>
        <a>Menu 1</a>
    </li>
    <li>
        <a>Menu 2</a>
        <ul>
            <li>Sub menu 2</li>
        </ul>
    </li>
    <li>
        <a>Menu 1</a>
    </li>
</ul>​