CSS的第一個孩子沒有工作

Question

我有以下的HTML

<div class="product-info-top">      
<div class="price-box"> 
    <span class="regular-price hide-in-list"> 
     <span class="price">$10</span>          
    </span> 
    <a href="#" class="minimal-price-link"> 
     <span class="price">$8.50</span> 
    </a> 
</div> 
<div class="product-name-wrap"> 
    <h2 class="product-name"> 
     <a href="#" title="Sleepers V2 Insomniac">Sleepers Insomniac</a> 
    </h2> 
    <p class="parent-cat-name">Playing Cards</p>      
</div>          

而且我想用css來只選擇第一span與class="price"和它的工作原理如下方式：

.product-info-top .price-box .price:first-child 

而我在這種情況下得到10美元的價格跨度。 但是，當HTML是這樣的：

<div class="product-info-top">      
<div class="price-box">        
    <p class="old-price"> 
     <span class="price">$7.49</span> 
    </p> 
    <p class="special-price"> 
     <span class="price">$5</span> 
    </p> 
</div> 
<div class="product-name-wrap"> 
    <h2 class="product-name"> 
     <a href="#" title="LTD Purple">LTD Purple</a> 
    </h2> 
    <p class="parent-cat-name">Playing Cards</p>      
</div>                 

它不起作用，因爲它是用span是class="price"裏面p標籤 我怎樣才能讓CSS選擇器適用於這兩個例子？

編輯：

有一兩件事，我需要與其他的 HMTL選擇沿：

<div class="product-info-top">              
<div class="price-box"> 
    <span class="price">$29.95</span>                    
</div> 
<div class="product-name-wrap"> 
    <h2 class="product-name"> 
     <a href="#" title="All Black Pack">All Black Pack</a> 
    </h2> 
    <p class="parent-cat-name">Playing Cards</p>      
</div>     

我已經試過這.product-info-top .price-box *:first-child .price但它確實不適用於最後一個例子

Answer 1

.product-info-top .price-box *:first-child .price { 
 
    color: red; 
 
}

<div class="product-info-top">      
 
<div class="price-box"> 
 
    <span class="regular-price hide-in-list"> 
 
     <span class="price">$10</span>          
 
    </span> 
 
    <a href="#" class="minimal-price-link"> 
 
     <span class="price">$8.50</span> 
 
    </a> 
 
</div> 
 
<div class="product-name-wrap"> 
 
    <h2 class="product-name"> 
 
     <a href="#" title="Sleepers V2 Insomniac">Sleepers Insomniac</a> 
 
    </h2> 
 
    <p class="parent-cat-name">Playing Cards</p>      
 
</div>          
 

 

 
<div class="product-info-top">      
 
<div class="price-box">        
 
    <p class="old-price"> 
 
     <span class="price">$7.49</span> 
 
    </p> 
 
    <p class="special-price"> 
 
     <span class="price">$5</span> 
 
    </p> 
 
</div> 
 
<div class="product-name-wrap"> 
 
    <h2 class="product-name"> 
 
     <a href="#" title="LTD Purple">LTD Purple</a> 
 
    </h2> 
 
    <p class="parent-cat-name">Playing Cards</p>      
 
</div>

Answer 2

爲此，您可以用* the universal selector這樣的伎倆。

的*selector會看到所有的子元素與類price和將目標根據父元素即price-box。

下面是工作片段：

.price-box *:first-child .price { 
 
    color: green; 
 
    background: yellow; 
 
}

<div class="product-info-top"> 
 
    <div class="price-box"> 
 
    <span class="regular-price hide-in-list"> 
 
     <span class="price">$10</span> 
 
    </span> 
 
    <a href="#" class="minimal-price-link"> 
 
     <span class="price">$8.50</span> 
 
    </a> 
 
    </div> 
 
    <div class="product-name-wrap"> 
 
    <h2 class="product-name"> 
 
     <a href="#" title="Sleepers V2 Insomniac">Sleepers Insomniac</a> 
 
    </h2> 
 
    <p class="parent-cat-name">Playing Cards</p> 
 
    </div> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    <br/><br/><br/><br/><br/><br/> 
 

 
    <div class="product-info-top"> 
 
    <div class="price-box"> 
 
     <p class="old-price"> 
 
     <span class="price">$7.49</span> 
 
     </p> 
 
     <p class="special-price"> 
 
     <span class="price">$5</span> 
 
     </p> 
 
    </div> 
 
    <div class="product-name-wrap"> 
 
     <h2 class="product-name"> 
 
     <a href="#" title="LTD Purple">LTD Purple</a> 
 
     </h2> 
 
     <p class="parent-cat-name">Playing Cards</p> 
 
    </div>

Answer 3

.product-info-top .price-box span .price, 
 
.product-info-top .price-box p:first-of-type .price 
 
{ 
 
    color: red; 
 
}

<div class="product-info-top"> 
 
    <div class="price-box"> 
 
    <span class="regular-price hide-in-list"> 
 
     <span class="price">$10</span> 
 
    </span> 
 
    <a href="#" class="minimal-price-link"> 
 
     <span class="price">$8.50</span> 
 
    </a> 
 
    </div> 
 
    <div class="product-name-wrap"> 
 
    <h2 class="product-name"> 
 
     <a href="#" title="Sleepers V2 Insomniac">Sleepers Insomniac</a> 
 
    </h2> 
 
    <p class="parent-cat-name">Playing Cards</p> 
 
    </div> 
 

 
    <div class="product-info-top"> 
 
    <div class="price-box"> 
 
     <p class="old-price"> 
 
     <span class="price">$7.49</span> 
 
     </p> 
 
     <p class="special-price"> 
 
     <span class="price">$5</span> 
 
     </p> 
 
    </div> 
 
    <div class="product-name-wrap"> 
 
     <h2 class="product-name"> 
 
     <a href="#" title="LTD Purple">LTD Purple</a> 
 
     </h2> 
 
     <p class="parent-cat-name">Playing Cards</p> 
 
    </div>