CSS таргетинг <a>тегов в пределах <li>

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>

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>