如何选择< a>标签，其具有兄弟< ul>标签在CSS之后？

问题描述

HTML是这样：

 < ul> 
< li> 
< a>菜单1< / a> 
< / li> 
< li> 
< a>菜单2< / a> 
< ul> 
< li>子菜单2< / li> 
< / ul> 
< / li> 
< li> 
< a>菜单1< / a> 
< / li> 
< / ul> 
  

如何选择< a> 标签后面有一个同级的< ul> 标签，用纯CSS？

（其中，在上面的例子中，将< A>菜单2'; / A> ）

解决方案

不幸的是，我不认为你可以。

• 2的CSS包括，您可以选择紧随其他元素的元素。

  
  
  

  a + ul 将选择包含文本子菜单2的< ul>




• CSS 3包括，它允许您选择跟随另一个元素的元素，即使它们之间有元素。

  
  
  

  例如 a + ul 将选择包含文本子菜单2的< ul> < a> 和< ul> < span> c $ c>

但是没有一个选择器可以让您选择具有特定元素的元素 。

HTML is like this:

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

How can I select an <a> tag that has a sibling <ul> tag after it, with pure CSS?

(Which, in the example above, will be <a>Menu 2</a>.)

解决方案

Unfortunately, I don’t think you can.

• CSS 2 includes the adjacent sibling selector (+), which allows you to select an element that immediately follows another element.

  E.g. a + ul would select your <ul> containing the text "Sub menu 2"

• CSS 3 includes the general sibling selector (~), which allows you to select an element that follows another element, even if there are elements in between them.

  E.g. a + ul would select your <ul> containing the text "Sub menu 2" even if there was a <span> between the <a> and the <ul>

But neither has a selector that lets you select an element which has specific elements following it.

这篇关于如何选择< a>标签，其具有兄弟< ul>标签在CSS之后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！