CSS3 使用 :nth 选择器选择嵌套表格

Question

我已经设置了标记。这是 link。我无法弄清楚如何 select table 中的 table 单独。我需要使用 :nth select 或 select 嵌套 table 的 tr 和 td。

Answer 1

you can achieve this kind of elements by following the step by step structure sequence of elements using css this way you can achieve this.

.tableOne table{
    background-color:grey;
    color:white;
}
.tableOne table tr{
    background-color:red;
    color:white;
}
.tableOne table td{
    padding : 10px;    
    color:white;
}

嘿，看看演示代码

Demo code

.tableOne tr td:nth-child(2) table {
    background-color: aquamarine;
    padding:25px;
    border:2px solid yello;
}

updated

Answer 2

正如 Harry 所提到的，第 n 个 selector 在这里是错误的选择，因为它们找到的是兄弟元素而不是嵌套元素。如果您想了解更多，MDN 是一个很好的资源。

同样，正如 Harry 所建议的，如果您的 HTML 不是太复杂，那么 table table tr 或 table table td 可能就是您所需要的。它们 select 任何 tr 或 td 元素分别存在于一个 table 元素中，而该元素本身又在另一个 table 元素中。

请记住，selector 不会在第一场比赛就停止，并且会继续 selecting 任何与您的模式相匹配的比赛。也就是说，您可以在 table 秒内有 table 秒，但仍然符合您的模式，因此您可能需要发挥创意！

你真的不需要在你的 select 中使用 class .tableOne 或者除非你打算在你的页面中有其他你不想要的类似结构select:)

如果出于某种原因，您希望将相同的样式应用于多个 css select 或，请用逗号分隔它们，例如

table table tr,
table table td 
{
    /*your style here*/
}

Here 的另一个 link 了解有关 select 或

的更多信息

Answer 3

根据您的标记，以下 CSS 应该可以满足您的要求。如果我没看错你的问题，那就是...

table tr:nth-child(4) td:nth-child(1) table{background-color:#f0f;}
table tr:nth-child(4) td:nth-child(2) table{background-color:#0ff;}

这将选择包含两个内部 table 的 table 行，然后选择每个 table。

更好的方法当然是使用名称为 ids/class 的 div。表格应该用于表格数据，而不是布局。

您的fiddle已更新

Answer 4

试试这个

.tableOne tr td:first-child table {
background-color: green;
}

https://jsfiddle.net/0un0yvgy/

第二个

.tableOne tr td:nth-child(2) table {
background-color: red;
}

CSS3 使用 :nth 选择器选择嵌套表格

CSS3 selecting nested tables using :nth selectors

css

css-selectors

css-tables