採用第N-孩子span元素 - 所有span元素是奇數出於某種原因

Question

我試圖使用nth-child僞選擇在一個包含分區甚至將奇數跨度。我的HTML標記看起來像這樣。

<div class="load-data"> 
<span>Company: Heavy Haul LLC.</span><br> 
<span>Name: John Smith</span><br> 
<span>Phone: (123)-456-7890</span><br> 
<span>Position: Chase</span><br> 
<span>From: Knoxville, TN</span><br> 
<span>To: Nashville, TN</span><br> 
<span>Date: 03/02/2016</span><br> 
<span>Rate: $250 Day Rate</span><br> 
</div> 

我的CSS是這樣的：

.load-data { 
border: 1px solid #454545; 
background-color: #121212; 
display: inline-block; 
margin: 5px 10px; 
text-align: left; 
} 
.load-data > span { 
padding: 5px; 
display: inline-block; 
} 
.load-data span:nth-child(even) { 
color: #ff6400; 
} 
.load-data span:nth-child(odd) { 
color: #ff9900; 
} 

但由於某些原因，所有的span元素具有ff9900顏色。爲什麼他們都是奇數？

爲了調試我也嘗試使用nth-child(5)只是爲了看看會發生什麼，並且選擇了三線由於某種原因而不是五分之一。

我不明白爲什麼會這樣。

Answer 1

選擇

1. 使用nth-of-type相反，它是計算<br>作爲一個孩子。

2. 使用nth-child和div代替span，並擺脫<br>。

如果你只是刪除<br>和使用nth-child你會得到一個爛攤子，因爲<span>是inline，看到第二個例子。

在這一點上，你要麼通過分配給你的CSS改變<span>：

span { display: block; } 

或更改<span>到<div>

片段

.load-data span:nth-of-type(even) { background: blue; } 
 
.load-data span:nth-of-type(odd) { background: red; } 
 
.x span:nth-child(even) { background: blue; } 
 
.x span:nth-child(odd) { background: red; }

<div class="load-data"> 
 
<span>Company: Heavy Haul LLC.</span><br> 
 
<span>Name: John Smith</span><br> 
 
<span>Phone: (123)-456-7890</span><br> 
 
<span>Position: Chase</span><br> 
 
<span>From: Knoxville, TN</span><br> 
 
<span>To: Nashville, TN</span><br> 
 
<span>Date: 03/02/2016</span><br> 
 
<span>Rate: $250 Day Rate</span><br> 
 
</div> 
 
<br><br> 
 
<div class="x"> 
 
<span>Company: Heavy Haul LLC.</span> 
 
<span>Name: John Smith</span> 
 
<span>Phone: (123)-456-7890</span> 
 
<span>Position: Chase</span> 
 
<span>From: Knoxville, TN</span> 
 
<span>To: Nashville, TN</span> 
 
<span>Date: 03/02/2016</span> 
 
<span>Rate: $250 Day Rate</span> 
 
</div>