应用CSS样式到子元素

Question

应用CSS样式到子元素

5

以下是一个示例例子

<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样式名称来操作。

- Mayank Pandya

4个回答

4

div.test input{

}

将样式应用到所有嵌套在class为test的div中的输入框。

div.test input:first-child{

}

这会仅为第一个嵌套输入框设置样式。

">" 运算符只能为直接后代元素设置样式，因此它不会为您的输入框设置样式，因为您有 div.test > div > input，位于 div.test 和 input 之间的 div 使其不是 div.test 的直接后代元素。

- chiliNUT

不相邻 - 直系后代 - dc5

4

如果你想使用class="test"的div来给input应用样式，你可以像这样做：

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

- Ashis Kumar

1

由于其他答案没有提到这一点，对于这种情况，您还可以使用 * 选择器。它匹配后代的孙子或更晚的后代。您可以像这样使用它：.test * input。

- TheBaj

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adnrw · Accepted Answer

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

带有 > 的 CSS 仅选择直接后代。