如何使用CSS选择多个元素

Question

我有以下标记:

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

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

我想匹配只有一个CSS规则的input和textarea元素div.c3.我正在使用

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

但这匹配所有textareas,而不仅仅是在c3div中的一个cotnained .

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

请查看http://jsfiddle.net/Bp3qn/1/以获取实例.

---

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

我只需要突出显示c1-> c2-> c3容器中包含的输入和textarea,而不是其他组合.

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