2

如果我在 a 中有几个<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>
4

6 回答 6

1

你可以试试这个：

:nth-child(2)

但是您使用的是 CSS3，因此请务必根据需要使用您网站的用户来检查您的浏览器兼容性：

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

于 2012-05-04T21:34:54.970 回答
1

是的 ：）

您可以将 .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;
}
于 2012-05-04T22:06:08.950 回答
0

: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/

于 2012-05-04T21:34:58.407 回答
0

在这种情况下:first-child，必须是该选择器下的第一个元素<td>才能起作用（相反<div class="red">，它.red:first-child会起作用）

你可以改为使用:nth-child

.divE:nth-child(2) { float:left; }
.divE:nth-child(3) { float:right; }
于 2012-05-04T21:35:23.253 回答
0

我在 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>
于 2012-05-04T21:43:14.137 回答
0

使用: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 开始有效。

于 2012-05-04T21:54:54.650 回答