CSS 没有id的div的位置

Question

有没有办法在不知道 id 的情况下定位或设置 divs 样式？

<!DOCTYPE html>
<html>
<head>
  <style>
    #main div {
     background-color:coral;
     width: 40%;
    }
    #main div div  {
      background-color: lightblue;
      width: 60%;
    }
  </style>
</head>

<body>
  <div id="main">
    <div >Red DIV</div>
    <div >Blue DIV</div>
  </div>
</body>
</html>

Answer 1

定位元素的最佳方式是使用 ID 或类，但您可以使用 :nth-child

#main > div {
  background-color:coral;
  width: 40%;

  float: left;
}
#main > div:nth-child(2)  {
  background-color: lightblue;
  width: 60%;
  
  float: right;
}

<div id="main">
    <div >Red DIV</div>
    <div >Blue DIV</div>
  </div>

Answer 2

#main div:nth-of-type(1) { background-color: red; }

#main div:nth-of-type(2) { background-color: blue; }

CSS 没有id的div的位置

CSS position of divs without id

html

css

css-position