Question

我认为之前曾问过这个问题，但我不知道用什么词来进行搜索。说我有以下代码：

<div id="my-div">
    <input type="text" class="my-text-input">
    <input type="password" class="my-pwd-input">
    <textarea class="my-textarea"></textarea>
</div>

为了给my-div内的所有3个元素指定某些样式，我会像这样编写CSS：

<style>
#my-div .my-text-input, #my-div .my-pwd-input, #my-div .my-textarea {
    border: 1px solid red;
}
</style>

显然，#my-div部分重复了一段时间，在某些情况下，可能会有10个或更多。

问题：编写这些CSS选择器的简洁方法是什么？

编辑：
我需要在每个元素之前添加一个#my-div，因为我需要类似命名空间的东西，因为我正在开发Chrome扩展程序，而我不想要我的浮动内容页面的样式与原始页面混淆。

＆＃34; my-div＆＃34;中的所有3个元素，我的意思是特别选择的类，而不是＆＃34;所有＆＃34;，抱歉模棱两可。

@ Mumpo的SASS方式是我所期待的，但是有一个＆＃34; raw＆＃34; CSS做同样的方式？

Answer 1

如果要将样式应用于所有子元素，可以使用：

<style>
#my-div * {
    border: 1px solid red;
}
</style>

或者为所有孩子分配一个新的班级和风格。

另一种选择是使用SASS，它允许你做嵌套选择器：

#my-div {
    .class1 {}
    .class2 {}
}

Answer 2

要将css样式分配给all元素，您可以使用：

#my-div *{ }

如果要将样式指定给all where #my-div is parent of element，请使用：

#my-div > *{}

选择器说明css selectors

的有用链接

Answer 3

无论父级div如何，您都应该拥有输入的样式。

input, textarea{
    border: 1px solid red;
}

如果某些输入需要不同的样式：

<input type="text" class="big-input">

input.big-input{
    height: 40px;
}

如果您要将状态应用于form内的所有输入，或者div：

<form class="faded">
    <input type="text" class="big-input">
    <input type="text" class="big-input">
</form>

.faded input{
    opacity: .5;
}

在特定id下编写CSS选择器的简明方法

3 个答案: