用css找孩子 [英] find child using css

问题描述

嗨朋友，

以下是我的HTML代码

hi Friends,
Below is my HTML code

<div class="k-state-border-up">
   <div class="k-tooltip-content">
      <ul class="toolTipList"><ul>
      <hr></hr>
      <ul class="toolTipList">
         <span>Bing Ads</span>
         <li><a>Campaigns</a></li>
         <li><a>Test</a></li>
      <ul>
   </div>
</div>

我想在第二个ul列表中找到文本Campaigns，如何使用css选择器？



我试过以下，但没有成功

.k-state-border-up> .k-tooltip-content> .toolTipList：nth-​​child（2）> li：n-child（1）



有人可以帮忙吗？



谢谢

I want to find the text Campaigns form second ul list, how can I do using css selector?

I tried following, but did not succeed
.k-state-border-up > .k-tooltip-content > .toolTipList:nth-child(2) > li:nth-child(1)

Can anyone help?

thanks

推荐答案

只是为了支持ProgramFOX所说的，下面是演示......

演示

[问题]通过班级选择者获取列表项广告系列 [ ^ ]

Just to support what ProgramFOX has said, below is the Demo...

Demo

[Issue] Getting the List Item "Campaigns" by Class Selectors[^]

由于您的HTML代码无效，它无效：

• 您输入 ul ， hr 和 span 元素直接位于 ul 元素中。这是不允许的， ul 标记只能包含 li 标记（以及 li 标签，允许放置其他元素，如hr和ul）
• 你没有关闭 ul 标签

It does not work because your HTML code is invalid:

• You put a ul, a hr and a span element directly inside an ul element. This is not allowed, an ul tag can only contain li tags (and in li tags, it is allowed to put other elements such as hr and ul)
• You didn't close the ul tag

<div class="k-state-border-up">
   <div class="k-tooltip-content">
      <!-- remove the <ul class="toolTipList"><ul> line here -->
      <span>Bing Ads</span>   <!-- put the span outside the list -->
      <hr></hr>
      <ul class="toolTipList">
         <li><a>Campaigns</a></li>
         <li><a>Test</a></li>
      </ul> <!-- close the tag -->
   </div>
</div>

然后，使用此CSS：

Then, use this CSS:

.k-state-border-up > .k-tooltip-content > .toolTipList > li:nth-child(1)

除了@ProgramFOX引用的无效HTML之外，看起来你误解了的含义nth-child（）。



如jQuery文档中所述（http://api.jquery.com/nth-child-selector/ [ ^ ]），：nth-​​child（）选择器计算每个父项的所有子项，无论任何附加到伪类的选择器。



所以 .toolTipList：nth-​​child（2）指的是具有类 toolTipList 的任何元素，它也是其父元素的第二个子元素。它不必然引用第二个 toolTipList 元素。



如果你的意思对于你的HTML来说：

Besides the invalid HTML cited by @ProgramFOX, it looks like you have misinterpreted the meaning of nth-child().

As described in the jQuery documentation (http://api.jquery.com/nth-child-selector/[^]), the :nth-child() selector counts all children of each parent, regardless of any selector attached to the pseudo-class.

So .toolTipList:nth-child(2) refers to any element having class toolTipList that is also the second child of its parent. It does not necessarily refer to the second toolTipList element.

If you meant for your HTML to be this:

<div class="k-tooltip-content">
   <ul class="toolTipList"> ... </ul>
   <hr>
   <ul class="toolTipList">
      <li><span>Bing Ads</span></li>
      <li><a>Campaigns</a></li>
      <li><a>Test</a></li>
   </ul>
</div>

然后没有元素具有 toolTipList 也是第二个孩子的类（< hr> 元素是其父级的第二个子元素，但是 toolTipList 元素是第1和第3个孩子。）

then there is no element that has the toolTipList class that is also a 2nd child (the <hr> element is the 2nd child of its parent, but the toolTipList elements are 1st and 3rd children).

这篇关于用css找孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！