CSS定位<a> tags within </a> <li> <a>

Question

I'm trying to style a WooCommerce shop page and I'm getting really confused about the selectors I need.

In the image below, I want to remove the underline from the hyperlinks and make some other changes.

I've managed to target one <a> tag with

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

The price and the product title behave like hyperlinks, but I can't change the text-decoration to none. The title is in an <h2> and the price in a <span> but I can't make sense of how it all fits together

有没有建议如何定位所有带下划线的文本并删除下划线？

标记在这里：

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

Answer 2

它在这里工作只是使用相同的，并给出以下以您的类名为目标的css

 ul li a{
    text-decoration:none;
}

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