html - 将 CSS 样式应用于子元素

Question

这是一个示例

<html>
<head>
    <style>
        .test > input {     //this is wrong.
            color:red;
        }
    </style>
</head>

<body>
    <div class="test">
        <div>
            <input></input>
        </div>
    </div>
</body>
</html>

我想要做的是将样式应用于输入元素。如何选择输入元素。借助 div 的 CSS 样式名称。

score 13 · Accepted Answer

您可以只使用.test input（这将适用于中的每个输入<div class="test">）。

您的 CSS>仅选择直系后代

score 4 · Accepted Answer

如果您想使用带有 class="test" 的 div 将样式应用于输入，您可以这样做

<style>
    .test > div > input {
        color:red;
    }
</style>

score 3 · Accepted Answer

div.test input{

}

将为嵌套在类 test 的 div 中的所有输入设置样式

div.test input:first-child{

}

将仅设置第一个嵌套输入的样式。

">" 运算符仅设置直接后代元素的样式，因此它不会为您的输入设置样式，因为您有 div.test > div > input，div.test 和 input 之间的 div 使得输入不直接后代到 div。测试

score 1 · Accepted Answer

由于之前没有其他答案提到过这一点，对于这种特殊情况，您也可以使用*选择器。它匹配作为孙子或后来的后代的后代。你会像这样使用它：.test * input.

html - 将 CSS 样式应用于子元素

4 回答 4

Related

Reference