在这种情况下如何设置CSS nth-child？

Question

在这种情况下如何设置CSS nth-child？

我正在尝试使用纯CSS创建React徽标，但是在这种情况下，nth-child不能设置rotate：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
  body{
    background-color: #20232a;
    margin: 0px;
    padding: 0px;
  }
  main{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container{
    width: 500px;
    height: 500px;
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container .circle{
    width: 100px;
    height: 100px;
    background: #00d8ff;
    border-radius: 50%;
  }
  .container .ellipse{
    width: 480px;
    height: 150px;
    position: absolute;
    border: 20px solid #00d8ff;
    border-radius: 100%;
  }
  .container .ellipse:nth-child(1){
    transform: rotate(120deg);
    background: red;
  }
  .container .ellipse:nth-child(2){
    transform: rotate(-120deg);
    background: green;
  }
  .container .ellipse:nth-child(3){
    background: yellow;
  }
</style>
</head>
<body>

<main>
  <div class="container">
    <div class="circle"></div>
    <div class="ellipse"></div>
    <div class="ellipse"></div>
    <div class="ellipse"></div>
  </div>
</main>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我曾经.container .ellipse:nth-child(number)选择椭圆并旋转它们，但显然选择器找不到我的目标？！？！

我这种情况下第三个椭圆没有旋转，但是对于椭圆一和二必须设置120或-120度才能设置徽标样式...

谢谢

Answer 1

mik*_*key 6

问题在于，第n个孩子与所有其他兄弟姐妹有关。因此，索引偏离了1。您需要2、3和4，而不是1、2和3！

对此的参考是：https : //developer.mozilla.org/en-US/docs/Web/CSS/ : nth-child

归档时间：	6 年，7 月前
查看次数：	61 次
最近记录：	6 年，7 月前