Question

以下是示例

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

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

我想要做的是将样式应用于input元素。如何选择输入元素。在div的css样式名称的帮助下。

Answer 1

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

>的CSS仅选择直接后代

Answer 2

div.test input{

}

将设置嵌套在class test

的div中的所有输入的样式

div.test input:first-child{

}

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

“＆gt;” operator只设置直接后代元素的样式，因此它不会设置你的输入样式，因为你有div.test＆gt; div>输入，div.test和输入之间的div使得输入不直接下降到div.test

Answer 3

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

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

Answer 4

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

将css样式应用于子元素

4 个答案: