不理解子选择器 [英] Not understanding the Child Selector
问题描述
我有一些包含嵌套表格的旧版式。
我想要父表的< td>
> < html>
< head>
< style>
table tr td {
border：none;
}
table.listTable tr td
{
border：1px solid red;
}
< / style>
< / head>
< body>
< table class =listTable>
< tr>
< td>
left
< / td>
< td>
< table style =width：100％;>
< tr>
< td>
1
< / td>
< td>
2
< / td>
< / tr>
< / table>
< / td>
< td>
right
< / td>
< / tr>
< tr>
< td>
left
< / td>
< td>
doubles
< / td>
< td>
right
< / td>
< / tr>
< / table>
< / body>
< / html>
如何获取标记为 1的子单元和顶部中间单元格中的 2 ，以便通过修改 .listTable css选择器不会应用红色CSS？
这看起来像我想要的：
table.listTable> ; tr td
但它完全打破了选择器。
有人可以解释我需要什么选择器，以及为什么我尝试的选择器打破了布局？
这在jsfiddle： http://jsfiddle.net/nvZbq/
查看Firebug或您选择的其他浏览器开发工具中生成的标记。您会看到< tr> 不会 子元素< table> s。如果您不使用< tbody> ，浏览器将为您添加一个。
选择器使用：
table.listTable> tbody> tr> td
I have some legacy layouts with nested tables.
I'd like the parent table's <td>s to have borders of one color, while the inner tables have none.
Here:
<html>
<head>
<style>
table tr td{
border:none;
}
table.listTable tr td
{
border:1px solid red;
}
</style>
</head>
<body>
<table class="listTable">
<tr>
<td>
left
</td>
<td>
<table style="width:100%;">
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
</table>
</td>
<td>
right
</td>
</tr>
<tr>
<td>
left
</td>
<td>
doubles
</td>
<td>
right
</td>
</tr>
</table>
</body>
</html>
How do I get the subcells labeled 1 and 2 in the top middle cell to not have the red CSS applied to them by modifying the .listTable css selector?
This seems like what I want:
table.listTable > tr td
But it breaks the selector entirely.
Could someone explain what selector I need, and also why the selector I've tried breaks the layout?
This on jsfiddle: http://jsfiddle.net/nvZbq/
Look at the generated markup in Firebug or other browser dev tool of your choice. You'll see that <tr>s aren't actually child elements of <table>s. If you don't use a <tbody>, the browser will add one for you.
So here's the selector to use:
table.listTable > tbody > tr > td
这篇关于不理解子选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
