css - 选择 td 内的 div

Question

如果我有情侣<div> s 在 <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

是的:)

您可以将 .divE 类设置为默认向左浮动，然后您可以使用相邻同级选择器定义，当 divE 类的一个 div 紧跟在 divE 类的另一个 div 后面时，它应该向右浮动，就像这个:

.divE {
    float:left;
}

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

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

如果您将 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;
}