Question

这是我正在使用的html。我想为Item编写一个css选择器，文本为“DESIRED ELEMENT”：

 <div class="TopDiv">
      <div class="container">
           <div class="row">
                <div class="span2">
                     <strong>Text1</strong>
                </div>
                <div class="span3">Text2</div>
                <div class="span2">
                     <strong>Text3</strong>
                </div>
                <div class="span3">DESIRED ELEMENT</div>
           </div>
           <div class="row">
                <div class="span2">
                     <strong>Text4</strong>
                </div>
                <div class="span3">Text5</div>
                <div class="span2">
                     <strong>Text6</strong>
                </div>
                <div class="span3">
                     <div>Text7</div>
                     <div>Text8</div>
                     <div>Text9</div>
                     <div>Text10</div>
                     <div>Text11</div>
                     <div>Text12</div>
                     <div>Text13</div>
                </div>
           </div>
      </div>
 </div>

我很难找到我想要的div，因为我不完全理解nth-child of type这个或那个或者是一个孩子的孩子。

我只想要一些好的和简短的东西来检索容器后第一行的第4个div标签子。

Answer 1

选择器取决于你的元素总是在哪个顺序？

无论如何，你可以使用：

.row:first-child > .span3:last-child

这将选择类.span3的最后一个元素，该类是第一个.row的子元素。

jsFiddle here.

如果您想在IE8及之前支持last-child，则始终有Selectivizr。

一个应该在IE7 / IE8中工作的选择器可以是.row:first-child > .span3 ~ div.span3。

只有在.span3类的行中有完全两个元素时才使用此项。

jsFiddle here.

如果不是最后一个，但始终是第四个，请使用.row:first-child > div:nth-child(4)。

jsFiddle here.

Answer 2

容器后第一行的第4个div标签子。

css的翻译将是：

在容器

之后

.container >

的第一行

.row:first-child >

第4个div标签孩子

div:nth-child(4)

所以在一行：

.container > .row:first-child > div:nth-child(4)

找到容器类，在childs中找到第一个行类，在里面找到第4个div标签。

检索multirow div的第一行内的第4个div标签？

2 个答案: