Question

我想在下面的代码中以不同的方式设置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>

Answer 1

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

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

Answer 2

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

Answer 3

如果只想更改位置，则可以使用css-grid轻松完成。太棒了。

.right{
  display: grid;
  justify-content: center;
  align-items: center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background:#BADA55;
}


#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>

Answer 4

#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>

具有相同类名的多个div的样式不同

4 个答案: