对CSS没有太多的经验,但是如何覆盖通过div类p span突出显示的设置?我需要将颜色覆盖为#ffffff
[更新]谢谢您的回答,大家都帮助解决了这一问题,整日忙于解决问题,无法解决或找不到特定的教程或示例。
很抱歉,如果我的问题在没有提供太多上下文的情况下不是很合理且很具体。再次抱歉,如果我无法在Google上找到正确的答案,因为CSS看起来有点像来自Swift世界的伏都教。我知道我想要实现的目标,但我找不到正确的方法。谢谢大家教我今天一些新的有用的东西。
答案 0 :(得分:3)
如果使用选择器.woocommerce-product-details__short-description
,则将选择包含div
元素的p
元素,该元素包含要设置样式的span
。因此,要选择跨度,您可以执行:.woocommerce-product-details__short-description > p > span
。这有可能会选择比您真正想要选择的元素更多的元素-它会选择所有span
的子元素,而这些p
是该类元素的子元素。
如果您只想选择此特定元素,则必须更具体。如果不看其余的代码,很难确切说明什么使该元素独特。一个考虑因素是父产品元素的唯一ID:product-45590
。因此,要使选择器非常具体,可以执行#product-45590 .woocommerce-product-details__short-description > p > span
。请注意空格与>
符号。 >
表示直系后代,就像是父母的孩子,而空格则表示任何后代,如孙子,祖父母或孩子的父母。
要在选择器正确之后进行实际的颜色更改,只需执行color: #ffffff
。但是,由于CSS选择器的特殊性,您不能仅覆盖具有用内联样式定义的颜色的元素上的颜色。因此,您还必须在规则中添加!important
。请注意,这通常不是首选做法,因为这意味着将来的开发人员将很难改写您的样式,但是有时这是必要的。
将它们放在一起:
.woocommerce-product-details__short-description > p > span {
color: #ffffff !important;
}
答案 1 :(得分:2)
在下面的代码中使用重要的
.woocommerce-product-details__short-description > p > span{
color: #fff!important;
}
答案 2 :(得分:2)
我认为您可以将color: #3333
修改为color: #fff
答案 3 :(得分:1)
使用html中的内联样式优先,因此您必须将其更改为所需的颜色,或者在CSS中的颜色之后使用!important。