在特定ID下编写CSS选择器的简便方法

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扩展程序，而且我不希望将浮动内容页面的样式与原始页面的样式搞混。

对于“ my-div内部的所有3个元素”，我是指专门选择的类，而不是“全部”，对不起。

@Mumpo的SASS方式是我所期望的，但是是否有一种“原始” 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选择器

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;
}