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>

当选择在另一个班级内时，第一个孩子不工作

3 个答案: