CSS 在 <li> 中定位 <a> 标签

Question

我正在尝试设计 WooCommerce 商店页面的样式，但我对我需要的选择器感到非常困惑。

在下图中，我想从超链接中删除下划线并进行一些其他更改。

我已经成功定位了一个 <a>标记为

.woocommerce ul.products li a{
    outline: 1px solid red!important;
}

价格和产品标题的行为类似于超链接，但我无法更改 text-decoration至 none .标题在 <h2> 中以及 <span> 中的价格但我无法理解它们是如何组合在一起的

有什么建议可以定位所有带下划线的文本并删除下划线吗？

标记在这里:

<ul>
<li class="product type-product post-1097 status-publish first instock product_cat-uncategorised has-post-thumbnail downloadable shipping-taxable purchasable product-type-simple">
   <a href="https://compucademy.co.uk/stg_2b77a/?product=test-product-1" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
      <img width="300" height="300" src="https://compucademy.co.uk/stg_2b77a/wp-content/uploads/2016/11/python-snake-3-wide-300x300.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="Python Tuition for Computer Science GCSE" srcset="https://compucademy.co.uk/stg_2b77a/wp-content/uploads/2016/11/python-snake-3-wide-300x300.png 300w, https://compucademy.co.uk/stg_2b77a/wp-content/uploads/2016/11/python-snake-3-wide-303x303.png 303w" sizes="(max-width: 300px) 100vw, 300px">
      <p></p>
      <h2 class="woocommerce-loop-product__title">Test Product 1</h2>
   </a>
   <p><a href="https://compucademy.co.uk/stg_2b77a/?product=test-product-1" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">	<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>0.00</span></span>
      </a><a href="/stg_2b77a/?page_id=1090&amp;add-to-cart=1097" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="1097" data-product_sku="" aria-label="Add “Test Product 1” to your basket" rel="nofollow">Get it now</a>
   </p>
</li>
</ul>

Answer 1

假设下划线是使用 text-decoration 创建的，下面是您如何为所有列表项后代禁用它。检查实际用于创建下划线的是什么(也可以是 border-bottom，甚至是伪元素，或渐变，或...)。

.products li * {
  text-decoration: none !important;
}

<ul class="products">
<li class="product type-product post-1097 status-publish first instock product_cat-uncategorised has-post-thumbnail downloadable shipping-taxable purchasable product-type-simple">
   <a href="https://compucademy.co.uk/stg_2b77a/?product=test-product-1" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
      <img width="300" height="300" src="https://compucademy.co.uk/stg_2b77a/wp-content/uploads/2016/11/python-snake-3-wide-300x300.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="Python Tuition for Computer Science GCSE" srcset="https://compucademy.co.uk/stg_2b77a/wp-content/uploads/2016/11/python-snake-3-wide-300x300.png 300w, https://compucademy.co.uk/stg_2b77a/wp-content/uploads/2016/11/python-snake-3-wide-303x303.png 303w" sizes="(max-width: 300px) 100vw, 300px">
      <p></p>
      <h2 class="woocommerce-loop-product__title">Test Product 1</h2>
   </a>
   <p><a href="https://compucademy.co.uk/stg_2b77a/?product=test-product-1" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">	<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>0.00</span></span>
      </a><a href="/stg_2b77a/?page_id=1090&amp;add-to-cart=1097" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="1097" data-product_sku="" aria-label="Add “Test Product 1” to your basket" rel="nofollow">Get it now</a>
   </p>
</li>
</ul>