Question

我有一个问题。我不能给每个人一种特定的风格。帮我enter image description here

Answer 1

您需要使用:nth-of-type(n)选择器。

//对于头等舱教练

#container .right:nth-of-type(1) {

}

//对于左一班的div

#container .left:nth-of-type(1) {

}

因此，您需要为每个div更改n值。

Answer 2

您的问题尚不清楚，但是无论如何我都想帮助您。我假设您要分别为容器中的每个div设置样式，而不是为所有“ .left”和“ .right”设置样式。

为此，您可以向每个div添加多个类；

.right {
  color: red;
}

.left {
  color: blue;
}

.r1,
.l3{
  color: green;
}

<div id='container'>
  <div class='right r1'>r1</div>
  <div class='right r2'>r2</div>
  <div class='right r3'>r3</div>
  <div class='right r4'>r4</div>
  <div class='left l1'>l1</div>
  <div class='left l2'>l2</div>
  <div class='left l3'>l3</div>
  <div class='left l4'>l4</div>
</div>

在上面的示例中，我将xth的“ left”类更改为“ left lx”。然后，我们可以分别设置div的样式。

您还可以使用“：nth-child”选择器，如下所示：

.right {
  color: red;
}

.left {
  color: blue;
}

#container div:nth-child(7),
#container div:nth-child(1) {
  color: green;
}

<div id='container'>
      <div class='right'>r1</div>
      <div class='right'>r2</div>
      <div class='right'>r3</div>
      <div class='right'>r4</div>
      <div class='left'>l1</div>
      <div class='left'>l2</div>
      <div class='left'>l3</div>
      <div class='left'>l4</div>
</div>

希望这会有所帮助！

Answer 3

你好吗？为此，您将需要使用“ id”而不是“ class”。

尝试替换HTML代码：

<div class='right'></div>

收件人：

<div class='right' id='div01'></div>

和CSS：

#div01{
    /* div specifications */
}

如何在文件css中对具有相同名称的类进行样式设置

3 个答案: