以不同的方式对具有相同类名的多个 div 进行样式设置答案

【问题标题】：styling multiple divs with same class name differently以不同的方式对具有相同类名的多个 div 进行样式设置
【发布时间】：2018-09-30 18:18:58
【问题描述】：

我想在不更改类名的情况下对下面代码中的 div 元素进行不同的样式设置，实际上每个类名为“right”的元素都代表一个空心矩形的一侧，所以我希望每个元素具有相同的宽度和高度但位置不同（垂直水平...）。

我知道我可以为每个 div 元素赋予不同的 id 或类名，但我想知道是否有不同的样式具有相同类名的元素？？

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='container'>
    <div class='right'></div>
    <div class='right'></div>
    <div class='right'></div>
    <div class='right'></div>
</div>
</body>
</html>

【问题讨论】：

您可以使用第 n 个孩子、第一个孩子、最后一个孩子和兄弟组合子。
你也可以粘贴你的“正确”类代码吗？
为什么不给每个元素添加额外的类呢？例如<div class='right vertical'></div> 等

标签： html css

【解决方案1】：

.right:nth-child(1) {
        background: red;
 }
 .right:nth-child(2) {
        background: yellow;
 }
...

https://www.w3schools.com/CSSref/sel_nth-child.asp

【讨论】：

【解决方案2】：

在每个 div 标签内您可以添加一个具有不同类名或 id 的新 div 标签。它不会对您的输出产生任何影响。

【讨论】：

【解决方案3】：

#container{
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 1fr 2fr;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='container'>
    <div class='right'>one</div>
    <div class='right'>two</div>
    <div class='right'>three</div>
    <div class='right'>four</div>
</div>
</body>
</html>

【讨论】：