2

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

 <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 标签子项。

4

2 回答 2

3

选择器取决于这是否是您的元素始终处于的顺序？

无论如何，您可以使用：

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

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

jsFiddle在这里。

如果你想支持last-childIE8 及之前的版本，总有Selectivizr。

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

仅当该类的一行中恰好.span3有两个元素时才使用它。

jsFiddle在这里。

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

jsFiddle在这里。

于 2013-06-19T17:02:06.767 回答
1

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

的css翻译将是：

容器后

.container >

第一行的

.row:first-child >

第 4 个 div 标签子

div:nth-child(4)

所以在一行中：

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

找到容器类，在子类中找到第一行类，然后在里面找到第四个 div 标签。

于 2013-06-19T17:22:29.933 回答