Html 使用 CSS 定位 DIV 的第一个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6983589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Target first element of DIV using CSS
提问by Liam
I have a WYSIWYG editor inside of a table that is placed within a div, as such...
我在放置在 div 内的表中有一个 WYSIWYG 编辑器，因此......
<div class="mydiv">
<li>
<table>My WYSIWYG</table>
</li>
</table>
Inside my WYSIWYG there are more tables however I only want to target the first table, I understand I could assign a class to the table but thats not what I want.
在我的 WYSIWYG 中，有更多的表，但是我只想针对第一个表，我知道我可以为表分配一个类，但这不是我想要的。
I've tried using the following only it doesn't seem to work...
我试过使用以下只是它似乎不起作用......
.mydiv li + table {width:100%;}
回答by thirtydot
You need .mydiv li table:first-child.
你需要.mydiv li table:first-child.
更多信息。
:first-childworks in IE7+ and all modern browsers.
:first-child适用于 IE7+ 和所有现代浏览器。
.mydiv li + tableisn't working for you because that matches something like this:
.mydiv li + table不适合您，因为它与以下内容相匹配：
<div class="mydiv">
<li></li>
<table>My WYSIWYG</table>
</div>
Also note that there are few things wrong with your HTML:
另请注意，您的 HTML 几乎没有问题：
<div class="mydiv">
<li>
<table>My WYSIWYG</table>
</li>
</table>
</table>at the end should be</div>.- The
divshould be aul, becauseliis not a valid child ofdiv.
</table>最后应该是</div>。- 本
div应该是ul的，因为li不是一个有效的小孩div。
I've fixed these things in the demo above.
我已经在上面的演示中修复了这些东西。
回答by Bojangles
Give this a go:
试一试：
ul li:first-child table
{
background: red;
}
The key here is :first-child. As @Warface notes, this isn't compatible with some browsers (pretty much only IE6), but all modern browsers support >just fine. See this.
这里的关键是:first-child。正如@Warface 指出的那样，这与某些浏览器（几乎只有 IE6）不兼容，但所有现代浏览器都支持>得很好。看到这个。
Demo here.. Please note I've changed the markup to what is (a) correct and (b) what I think it should be.
演示在这里。. 请注意，我已将标记更改为 (a) 正确和 (b) 我认为应该是什么。
回答by Phil
Amazing what a quick google or stackoverflow search will do for you!
令人惊讶的是，快速的 google 或 stackoverflow 搜索将为您做什么！
.mydiv li table:first-of-type { width:100% }
回答by Nivas
You are looking for the :first-childpseudo element
您正在寻找:first-child伪元素
But be wary of browser support.
但要警惕浏览器支持。
