CSS的第一个孩子没有工作

问题描述：

<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但它确实不适用于最后一个例子

你的第一个例子不会做你要求它做什么。您仍然选择两个跨度。 –

答

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

答

为此，您可以用* 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>

答

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

CSS的第一个孩子没有工作

相关推荐