Question

我正在处理包含半尺寸和全尺寸输入的表格。

中等大小的输入将成对出现，第二个将向右浮动/向右推进。

<form>
<h3>Title</h3>
<div class="mid">
    <label>blah</label>
    <input type="text">
</div>
<div class="mid">
    <label>blah</label>
    <input type="text">
</div>

<div class="full">
    <label>blah</label>
    <input type="text">
</div>

<div class="mid">
    <label>blah</label>
    <input type="text">
</div>
<div class="mid">
    <label>blah</label>
    <input type="text">
</div>
</form>

我使用CSS3“form .mid：nth-child（odd）”，但是，因为我有h3，所以它没有查看正确的元素。

有没有办法可以使用CSS或jQuery自动执行此过程，而不必手动为每个其他项添加一个类？

谢谢，

Answer 1

我认为只使用CSS是不可能的，遗憾的是没有nth-of-class选择器。

你可以使用jQuery的:odd选择器：

$('form div.mid').filter(':odd').addClass('someClass');

这样，您只需要处理所需的元素集合。

另请注意：

特别要注意，基于0的索引意味着，反直觉地，：奇数选择第二个元素，第四个元素，在匹配的集合中等等。

Here's a fiddle

Answer 2

你可以尝试类似的东西

form div:nth-child(3n+1)

示例：http://jsfiddle.net/nUu6M/

这将触发每个.full输入字段而不使用任何类

设置具有特定类的每个其他div的样式

2 个答案:

Here's a fiddle