如何更改文字颜色?

时间:2019-01-22 13:07:32

标签: css css3

css

对CSS没有太多的经验,但是如何覆盖通过div类p span突出显示的设置?我需要将颜色覆盖为#ffffff

[更新]谢谢您的回答,大家都帮助解决了这一问题,整日忙于解决问题,无法解决或找不到特定的教程或示例。

很抱歉,如果我的问题在没有提供太多上下文的情况下不是很合理且很具体。再次抱歉,如果我无法在Google上找到正确的答案,因为CSS看起来有点像来自Swift世界的伏都教。我知道我想要实现的目标,但我找不到正确的方法。谢谢大家教我今天一些新的有用的东西。

4 个答案:

答案 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。