是否可以对没有 id 和 class 的标签应用不同的 CSS 属性？

Question

我想弄清楚是否可以对没有 class 的标签应用不同的 CSS。我在代码片段中发布的示例显然不起作用，但我的问题是：如何在没有 class 或 id 的情况下将不同的 CSS 应用于两个跨度？

.box {
display: flex;
flex-direction: column;
}

.box > span 1  {
font-size: 28px;
}

.box > span 2  {
font-size: 18px;
}

<div class="container">

  <div class="box">
   <span>Example 1</span>
   <span>Example 2</span>
  </div>

</div>

Answer 1

使用 :nth-child() pseudo-class:

.box span:nth-child(1) {
  font-size: 28px;
}

.box span:nth-child(2) {
  font-size: 18px;
}

或者，您可以使用 :first-child 和 :last-child 如果您知道总会有两个。

Answer 2

对于您的示例，您还可以使用：

.box span:first-of-type {
    font-size: 28px;
}

.box span:last-of-type {
    font-size: 18px;
}

Is it possible to apply different CSS properties to tags that have no id and class?