Question

我有这个HTML结构，我想在CSS中定位divs，如下所示：

<div></div>
<div></div>
<div></div> 
<div></div> <!-- SPECIFIC STYLE -->
<div></div> <!-- SPECIFIC STYLE -->
<div></div> <!-- SPECIFIC STYLE -->
<div></div>
<div></div> 
<div></div> 
<div></div>
<div></div> <!-- SPECIFIC STYLE --> 
<div></div> <!-- SPECIFIC STYLE -->
<div></div> <!-- SPECIFIC STYLE -->

我不知道如何使用divs在CSS中定位这些nth-child？

编辑：不使用课程

Answer 1

你走了。

div:nth-child(4),
div:nth-child(5),
div:nth-child(6),
div:nth-child(11),
div:nth-child(12),
div:nth-child(13) {
    /*your style*/
}

注意：当然，此解决方案仅在您无法向相关特定div添加类时才有用。此外，它适用于您网站中的任何div序列。因此，如果您选择使用此方法，则应该在div部分之前为父级指定div id。

Answer 2

这是运行代码试试这个

＆＃13;

div:nth-child(4){
color:red;
}
div:nth-child(5){
color:blue;
}
div:nth-child(6){
color:white;
}
div:nth-child(11){
color:orange;
}
div:nth-child(12){
color:pink;
}
div:nth-child(13){
color:yellow;
}

＆＃13;

<div>no style</div>
<div>no style</div>
<div>no style</div> 
<div>red</div> <!-- SPECIFIC STYLE -->
<div>blue</div> <!-- SPECIFIC STYLE -->
<div>white</div> <!-- SPECIFIC STYLE -->
<div>no style</div>
<div>no style</div> 
<div>no style</div> 
<div>no style</div>
<div>orange</div> <!-- SPECIFIC STYLE --> 
<div>pink</div> <!-- SPECIFIC STYLE -->
<div>yellow</div> <!-- SPECIFIC STYLE -->

＆＃13;

Answer 3

您可以将类添加到需要设置样式的div中。样本如下：

<div></div>
<div></div>
<div></div> 
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
<div></div>
<div></div> 
<div></div> 
<div></div>
<div class="specific_style"></div> <!-- SPECIFIC STYLE --> 
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->

and in CSS update by using the class like .specific_style { //styles }

Hope This is helpful

Answer 4

这样的东西？

div {
  float: left;
  width: 50px;
  height: 50px;
  border: solid 1px black;
  background-color: #babafe;
}

.your-style {
  background-color: #bafeba;
}

<div></div>
<div></div>
<div></div> 
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
<div></div>
<div></div> 
<div></div> 
<div></div>
<div class="your-style"></div> <!-- SPECIFIC STYLE --> 
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
<div class="your-style"></div> <!-- SPECIFIC STYLE -->

定位多个<div> CSS

4 个答案: