Html CSS嵌套属性中的深度是否重要

我认为问题的标题给出了错误的想法，但我想不出一个恰当的方式来表达这个

假设我有以下HTML：

<div id="form-wrapper">
    <form id="searchbox">
        <table>
        <tr>
            <td><label for="searchterm">Searchterm: </label></td>
            <td><input type="text" name="searchterm" /></td>
        </tr>
        <tr>
            <td><label for="name">Name: </label></td>
            <td><input type="text" name="name" /></td>
        </tr>
        </table>
    </form>
</div>

与此相反：

div#form-wrapper form table tr td {
    font-size: 14pt;
}

我认为后者在语法上是正确的，因为HTML元素就是这样嵌套的。我知道我可以很容易地在JSFIDLE中测试这一点（我没有，部分原因是Languaor），但我想知道它在语法/语义上是否也可以，而不仅仅是它是否有效

---

谢谢

是的，css有特殊性规则。如果两个规则对特定元素具有相反的规则，则具有“更具体”选择器的规则获胜

e、 g

#foo{
颜色：红色
}
福娃{
颜色：蓝色；
}
你好

---

这个div会变成蓝色，因为

div#foo

比普通的

#foo
更具体，后者更准确，并且由于其目标增加而具有更高的重要性。他们都会像你的例子一样做，但是如果你要做的话

div#form-wrapper form table tr td {
    font-size: 16pt;
}
div#form-wrapper td {
    font-size: 14pt;
}

第二个不会覆盖第一个，因为它的重要性更高。此外，第一种方法要求td位于表单标记内，而第二种方法将根据条件设置td样式，并且td是否位于表单标记内

阅读CSS特异性，它解释了更多的目标=更多的特异性，因此更重要
 好吧，如果你第一次做的话，它会形成td的所有内部表单包装。后者更为具体，否则，它是完全可以接受的？它可以工作，但可能不是你想要的方式。如果你想瞄准一个特定的td，你应该一路嵌套它。
#foo {
   color: red
}

div#foo {
   color: blue;
}


<div id="foo">Hi there</div>

div#form-wrapper form table tr td {
    font-size: 16pt;
}
div#form-wrapper td {
    font-size: 14pt;
}