Question

对于以下生成的HTML：

<div id="parent1">
   <div class="child" />
</div>
<div id="parent2"> 
    <div class="child" />
</div>
<div id="parent3"> 
    <div class="child" />
</div>

我想从＃parent1和＃parent2中选择.child：

#parent1 .child, #parent2 .child { Do stuff... }

然而，这可能会变得混乱。是否有可能选择这样的一组父母？

(#parent1, #parent2) .child { Do stuff... }

Answer 1

在这种情况下，您可以使用[attribute^=value]（begin with）或[attribute*=value]（contain）语法。

HTML：

<div id="parent1">
    <div class="child">child</div>
</div>
<div id="parent2"> 
    <div class="child">child</div>
</div>
<div id="anotherParent"> 
    <div class="child">child</div>
</div>

CSS：

[id^=parent] .child {
    color: red;
}

DEMO：https://jsfiddle.net/lmgonzalves/eh5saf1k/

但我认为最好简单地指出同一个class。

Answer 2

选择者L4草案介绍:matches()。它允许你做

:matches(#parent1, #parent2) .child

请注意，这是一项实验性功能，浏览器尚未实现。但是，有些支持:-moz-any或:-webkit-any，其行为类似于:matches。

:-moz-any(#parent1, #parent2) .child {
  color: blue;
}
:-webkit-any(#parent1, #parent2) .child {
  color: blue;
}
:matches(#parent1, #parent2) .child {
  color: blue;
}

<div id="parent1">
  <div class="child">Child</div>
</div>
<div id="parent2"> 
  <div class="child">Child</div>
</div>
<div id="parent3"> 
  <div class="child">Child</div>
</div>

Answer 3

您要找的是nesting，您需要使用SASS或SCSS：http://jsfiddle.net/soy3tdmy/

#parent1, #parent2 {
    .child {
        color: red;
        text-decoration: underline;
    }
}

CSS：选择一组父母

3 个答案: