使用css选择器只选择无序列表的父元素减去子列表？

只是试图将样式设置为第一个样式而没有对样式进行样式设计。我意识到在CSS中没有父类选择器这样的东西，并且可以有充分的理由，所以如何在不分配所有li类的情况下做到这一点？也许这是不可能的，这就是为什么我问。这是HTML。使用css选择器只选择无序列表的父元素减去子列表？

<div id="myDiv"> 
    <h2>Headline 2</h2> 

    <div> 
     <p>Some Paragraph 1</p> 
     <ul class="list"> 
      <li><a href="#">List 1 Item 1 (=)</a></li> 
      <li><a href="#">List 1 Item 2 (=)</a> 
       <ul> 
        <li><a href="#">List 1 Item 2a</a></li> 
        <li><a href="#">List 1 Item 2b</a></li> 
       </ul> 
      </li> 
      <li><a href="#">List 1 Item 3 (=)</a></li> 
     </ul> 
    </div> 

    <p>Some paragraph 2</p> 
    <div> 
     <ul> 
      <li><a href="#">List 2 Item 1</a></li> 
      <li><a href="#">List 2 Item 2</a></li> 
     </ul> 
    </div> 
</div>

这里是我想针对

同样的东西，我知道我可以只添加类所有这些，得到我想要的结果，我只是想知道是否有另一种办法。

使用CSS选择器，这里是我可以定位到子表（不是我想要的）

ul.list li > ul li a{ 
    ... 
}

瞄准第一UL加上子列表（不是我想要的）

ul.list > li a{ 
    ... 
}

这是一个为您提供便利的小提琴。
http://jsfiddle.net/94e2fo30/

来源

2015-08-16 dragonore

第一列表和它的子列表之间的区别在于，第一是由p之前。

p + ul > li > a { 
    color: red; 
}

会给：

来源

2015-08-16 03:59:27

欣赏，但是如果段落在div内，这仍然可以使用不同的语法显然，再次感谢。 – dragonore

你是什么意思？第一个'p'在'div'里面 –

没关系，我想通了。我在提到第二段。所以我只想说出你所说的话，并用这种方式写出来。p + ul.list> li> 再次感谢，我试图更好地理解CSS选择器。 – dragonore

#myDiv > div > ul > li > a{color:red}

因为这两个你的父母李时珍是UL的直接孩子这是这是#myDiv

的孩子

这将申报单的直接子在你的情况下工作，但我不会推荐这样做。任何时候css开始看起来都是这样的，你会想重新考虑你的组织

来源

2015-08-16 04:08:35 Gisheri

使用css选择器只选择无序列表的父元素减去子列表？

回答

相关问题