Question

如果我在<div>内有<td>个夫妻，我可以选择每个人吗？

例如，我想让第一个向左浮动而第二个向右浮动。是否可以只使用CSS？

.divE:first-child { float:left; }
.divE:last-child  { float:right; }

HTML

<table id="myTbl" cellpadding="0" cellspacing="0">
    <tr>
        <td>
        <div class="red">asdasd</div>
        <div class="divE"></div>
        <div class="divE"></div>
        content
        </td>
    </tr>
</table>

Answer 1

你可以尝试一下：

:nth-child(2)

但您正在使用CSS3，因此请务必根据使用您网站的人员来检查您的浏览器兼容性：

http://caniuse.com/#search=nth

Answer 2

是的，是：）

你可以将.divE类设置为默认左浮动，然后你可以通过使用相邻的兄弟选择器定义，当divE类的div紧跟divE类的另一个div时，它应该像这样：

.divE {
    float:left;
}

.divE + .divE {
    float: right !important;
}

但是，为每个div赋予一个id是不是更容易，然后将浮动设置为每个？或者只是将.floatRight或.floatLeft类应用于div，然后更改这些类的浮点数？通过这种方式，您可以重用这些类。

如果您将HTML更改为：

<table id="myTbl" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="3" width="25%">
    <div class="red">asdasd</div>
    <div class="divE floatLeft"></div>
    <div class="divE floatRight"></div>
    content
    </td>
</tr>

并像这样添加CSS：

.floatLeft {
float: left;
}

.floatRight {
float:right;
}

Answer 3

:nth-child是神奇的。

td div.divE {
    float: left;
}

td div.divE:nth-child(2n) { /* all even divs */
    float: right;
}

/* or just use "even" */
td div.divE:nth-child(even) {
    float: right;
}

适用于所有真实浏览器。意思是，没有IE8及以下。

更多信息：http://css-tricks.com/how-nth-child-works/

Answer 4

在这种情况下，:first-child必须是<td>下的第一个元素才能使该选择器正常工作（而<div class="red">则.red:first-child可以工作）

您可以使用:nth-child

.divE:nth-child(2) { float:left; }
.divE:nth-child(3) { float:right; }

Answer 5

我已经为html添加了一个div元素，它可以工作。

CSS

.divE:last-child  { color:red; }
.divE:first-child { color:blue; }

HTML

<td>
<div class="red">asdasd</div>
<div><div class="divE">blue</div></div>
<div class="divE">red</div>
content
</td>

Answer 6

使用:first-child选择器和sibling selector的组合，您可以像这样定位第二个div：

.red{
    float: left;
}
.divE{
    float: left; //this is for the second .divE
}
.red + .divE{
    float: right; //this is for the first .divE
}

这样的解决方案适用于IE7。

在td中选择div

6 个答案: