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

但这匹配所有textareas，而不仅仅是c3 div中的cotnained。

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

查看http://jsfiddle.net/Bp3qn/1/的实例。

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

我只需要突出显示c1-＆gt; c2-＆gt; 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;}

Answer 2

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

如何使用CSS选择多个元素

2 个答案: