-3

css

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

[更新] 谢谢大家的回答，大家都帮忙解决了，一直卡在这个问题上，无法解决，也找不到具体的教程或示例。

抱歉，如果我的问题不是很好，也不是很具体，但没有提供太多背景信息。再次抱歉，如果我无法在 google 上找到正确的答案，因为 CSS 看起来有点像来自 Swift 世界的巫毒教。我知道我想要实现什么，但我找不到正确的方法来实现它。谢谢大家今天教我一些新的和有用的东西。

4

4 回答 4

3

如果您使用选择器.woocommerce-product-details__short-description，您将选择div包含要设置样式的p元素的元素。span所以要选择跨度，你可以这样做.woocommerce-product-details__short-description > p > span：这可能会选择比您真正想要选择的元素更多的元素 - 它会选择所有span属于 s 的子元素的ps，这些子元素是该类的元素的子元素。

如果您只想选择此特定元素，则必须更具体。如果没有看到其余的代码，很难确切地说出是什么让这个元素独一无二。一个考虑因素是父产品元素的唯一 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;
}
于 2019-01-22T13:12:25.723 回答
2

使用下面的重要代码

.woocommerce-product-details__short-description > p > span{
   color: #fff!important;
}
于 2019-01-22T13:11:49.933 回答
2

color: #3333我想你可以编辑color: #fff

于 2019-01-22T13:13:21.937 回答
1

html 中的内联样式优先，因此您必须将其更改为所需的颜色或在 css 中的颜色之后使用 !important。

于 2019-01-22T13:11:15.997 回答