css - 如何选择x元素之后的所有n元素？

Question

我正在尝试为 i 元素之后的所有 span 设置样式，但有些东西我无法实现。我无法按顺序为 span 元素设置样式。

这是我的代码

.header p span:nth-child(1) {
  color: red;
}

.header p span:nth-child(2) {
  color: blue;
}

.header p span:nth-child(3) {
  color: orange;
}

<div class="header">

  <p>
    <i class="fas fa-phone"></i>
    <span>444</span>
    <span>01</span>
    <span>34</span>
  </p>
</div>

Answer 1

您要么想使用nth-of-type，要么使用general sibling combinator

span:nth-of-type(1) {
  color: red;
}

span:nth-of-type(2) {
  color: blue;
}

span:nth-of-type(3) {
  color: orange;
}

<div class="header">

  <p>
    <i class="fas fa-phone"></i>
    <span>444</span>
    <span>01</span>
    <span>34</span>
  </p>
</div>

span {
  color: green;
}

i ~ span {
  color: red;
}

<div class="header">

  <p>
    <span>Some span before the `i` tag.</span>
    <i class="fas fa-phone"></i>
    <span>444</span>
    <span>01</span>
    <span>34</span>
  </p>
  
  <span>Some span elsewhere in the document</span>
</div>