Question

我想为两个div使用一个类.outer，但如果有两个以上的子元素，则为父元素使用不同的样式。

请参阅附件中的例子。

＆＃13;

.outer1{
    border: solid 6px #f00;
}

.outer2{
    border: solid 6px #ccc;
}

＆＃13;

<p>More than two childs:</p>

<div class="outer1">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
</div>

<p>Just two childs:</p>
<div class="outer2">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</div>

＆＃13;

Answer 1

- ＆GT;请附上此代码。 - ＆GT;每当要在两个或多个元素中应用commaon类名时，首先要计算要更改设计的公共类的数量。 - ＆GT; .class-name：nth-child（班级号码） - ＆GT;请找到以下示例

＆＃13;

.outer:nth-child(1) {
    border: solid 6px #f00;
}
.outer:nth-child(2) {
    border: solid 6px #ccc;
}

＆＃13;

<div class="outer">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <div class="div3">div3</div>
</div>
<div class="outer">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
</div>

＆＃13;

Answer 2

据我所知，仅使用CSS是不可能的，因为它涉及选择父母。您可以选择标签的第n个孩子，但不能回到第n个孩子的标签。一种方法是选择nth-child(3)并更改其父级的背景颜色。

如果有两个以上的子项可用，则更改父div样式（仅限CSS）

2 个答案: