我想改变WooCommerce目录中所有产品标签的背景颜色。在我做的一家商店里,没有我做任何事情背景就变成了白色,我喜欢这样,但我没有添加任何样式来实现这一点。
我想更改背景色并添加border-radius
,甚至是阴影you can see in this example.
我已经使用了所有的类,并添加了一个接一个的css,以获得border-radius
和box-shadow
,但我没有得到它。
背景更改了整个页面的background
,而box-shadow
也添加到了所有产品选项卡的容器中,如图所示。
我应该怎么做才能改变产品的背景颜色,并只给予他们border-radius
和box-shadow
到产品标签。
.product-small div{
border-radius: 40px 20px 40px 20px;
}
.col-inner {
-webkit-box-shadow: 3px 4px 5px lightgrey;
}
正如我所说的,我在整个产品的类中做了测试,但没有成功。首先我拿了一个产品的原理图,我在下面展示,然后我添加了css到每一个,但我得到的唯一的东西是我们在图像中看到的,阴影遍布整个块
以下是每个产品表的结构:
<div
class="product-small col has-hover product type-product post-967 status-publish instock product_cat-galleteria-ecologica shipping-taxable purchasable product-type-simple">
<div class="col-inner">
<div class="badge-container absolute left top z-1">
<div class="product-small box">
<div class="box-image">
<div class="image-none">
<a href="http://" target="_blank" rel="noopener noreferrer"></a>
</div>
<div class="image-tools is-small top right show-on-hover"></div>
<div></div>
<div></div>
</div>
<div class="box-text box-text-products text-center grid-style-2">
<div class="title-wrapper"></div>
<div class="price-wrapper"></div>
<div class="add-to-cart-button"></div>
</div>
</div>
</div>
</div>
我怎样才能给每个产品标签一个背景色和阴影?
我应该应用样式的类是什么?
1条答案
按热度按时间fd3cxomn1#
查看HTML结构,似乎应该尝试向
.product-small
类添加样式,如下所示。同样,我没有在IDE中测试它,但它可能会工作。