作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试设计 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&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>
最佳答案
假设下划线是使用 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&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>
关于CSS 在 <li> 中定位 <a> 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56127076/
我是一名优秀的程序员,十分优秀!