使用CSS定位DIV的第一个元素

Question

我在一个表格中放置了一个WYSIWYG编辑器，这个编辑器位于一个div中，因此......

<div class="mydiv">
    <li>
        <table>My WYSIWYG</table>
    </li>
</table>

在我的WYSIWYG里面有更多的表但是我只想要定位第一个表，我知道我可以为表分配一个类但这不是我想要的。

我尝试使用以下内容，但它似乎无法正常工作......

.mydiv li + table {width:100%;}

Answer 1

您需要.mydiv li table:first-child。

More information

:first-child适用于IE7 +和所有现代浏览器。

An example.

---

.mydiv li + table不适合您，因为它符合以下内容：

<div class="mydiv">
    <li></li>
    <table>My WYSIWYG</table>
</div>

---

另请注意，您的HTML几乎没有问题：

<div class="mydiv">
    <li>
        <table>My WYSIWYG</table>
    </li>
</table>

• </table>最后应为</div>。
• div应该是ul，因为li不是div的有效子项。

我已在上面的演示中解决了这些问题。

Answer 2

放手一搏：

ul li:first-child table
{
    background: red;
}

这里的关键是:first-child。正如@Warface所说，这与某些浏览器不兼容（几乎只有IE6），但所有现代浏览器都支持>就好了。 See this.

Demo here.。请注意我已将标记更改为（a）正确和（b）我认为它应该是什么。

Answer 3

令人惊讶的是，快速google或stackoverflow搜索将为您做什么！

.mydiv li table:first-of-type { width:100% }

Answer 4

您正在寻找:first-child伪元素

但要小心浏览器的支持。