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でclass="price"を持つ唯一の最初のspanを選択すると、それは次のように動作します動作しませんway：

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

この場合、私は$ 10の価格でスパンを取得します。 しかし、HTMLは次のようである：それはclass="price"とspanだから

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

それが動作しないことはどのように私は両方の例のために働くCSSセレクタ行うことができますpタグ 内にありますか？

編集：

私は他のもの HMTLと一緒に選択する必要がある1つのより多くの事があります：

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