如何选择X元素毕竟N元素？

Question

我想我的风格跨度全部是我一个元素之后，但有一些奇怪，我不能achieve.I无法造型我跨度元素的顺序。

这里是我的代码

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

Answer 2

：第n个孩子会算的i-元素也是如此，你将不得不使用索引2,3和4，它的工作，只要你想。或者，如果你想只包括沿翼展元素，你可以使用:nth-of-type：

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

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

.header p 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>

Answer 3

这可能会实现，其标签我是这里的问题

div > span:nth-child(1) {
  color: red;
}

div > span:nth-child(2) {
  color: blue;
}

div > span:nth-child(3) {
  color: orange;
}

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