如何使用 CSS 选择多个元素

Question

我有以下标记：

 <div class="c1">
  <div class="c2">
    <div class="c3">
      <input>
      <textarea></textarea>
    </div>

    <input>
    <textarea></textarea>
  </div>
</div>

我想匹配 input 和 textarea 来自 div.c3 的元素只有一个 CSS 规则。我在用着

div.c1 .c2 .c3 input,textarea { border: 1px solid #f00; }

但这匹配所有文本区域，不仅是 c3 div 中的一个。

这是可能的，还是我必须为每个元素编写单独的 CSS 选择器？

查看 http://jsfiddle.net/Bp3qn/1/ 以获取实时示例。

---

我更新 了 http://jsfiddle.net/Bp3qn/3/

我只需要突出显示 c1->c2->c3 容器中包含的输入和文本区域，而不需要其他组合。

原文由 Quamis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不需要选择器中的其他元素，除非您 只想 匹配 .c3 如果它在 div.c1 .c2 内：

 .c3 input,
.c3 textarea {
    /* that's it! */
}

如果你这样做（根据你的编辑），使用这个：

 div.c1 .c2 .c3 input,
div.c1 .c2 .c3 textarea{
    border: 1px solid #f00;
}

演示：http: //jsfiddle.net/wesley_murch/Bp3qn/6/

---

编辑后：这就是我要避免的（我真正的样式表要复杂得多，css规则更长，而且很难阅读）

在这种情况下，为了让事情变得更容易，只需在 .c3 中添加另一个类，如下所示：

 <div class="c3 special">

.c3.special input,
.c3.special textarea{
    border: 1px solid #f00;
}

演示：http: //jsfiddle.net/wesley_murch/Bp3qn/7/

如果您必须使选择器尽可能小，并且没有 .c3.special 的其他子级，则只需使用星形选择器（几乎从不推荐）：

 .c3.special * {border: 1px solid #f00;}

原文由 Wesley Murch 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我知道这是一个古老的话题，但我想对此补充一些观点，因为我只是在尝试应用相同的逻辑之王时才来到这里。由于这个问题，我现在知道我们应该稍微重新考虑一下这个逻辑。

首先，赞成的答案确实解决了问题，但我不明白为什么在 CSS 中使用 .c1 .c2 类。

正如@Wesley Murch 首先写道，这应该足够了：

.c3 input,.c3 textarea { /* 就是这样！ */ }

也可以通过以下方式指定更多内容：

 div.c3 input,
div.c3 textarea {
    border: 1px solid #f00;
}

这已经是以下内容的简写：

 div.c3 > input,
div.c3 > textarea {
    border: 1px solid #f00;
}

但是，IMO，除非您真的无法控制 div 中的内容，否则您应该通过在 HTML 中再添加一个类来简化所有内容，然后您最终也只会得到一个规则，即甚至更容易阅读：

HTML 更新多了一个类 special-border-color 例如：

 <div class="c1">
    <div class="c2">
        <div class="c3">
            <input class="special-border-color">
            <textarea class="special-border-color"></textarea>
        </div>

        <input>
        <textarea></textarea>
    </div>
</div>

CSS 简单规则：

 .special-border-color {
    border: 1px solid #f00;
}

原文由 Islem BEZZARGA 发布，翻译遵循 CC BY-SA 4.0 许可协议