我可以为没有特定类但只有样式的元素编写 CSS 代码吗？答案

【问题标题】：Can I write a CSS code for elements NOT having a certain class, but only style?我可以为没有特定类但只有样式的元素编写 CSS 代码吗？
【发布时间】：2021-01-07 15:48:32
【问题描述】：

我需要为使用 elementor 构建的网站编写 css 代码。

<p>
 <span style="color: #000000; font-family: Poppins;">
  <span style="font-size: 18.6667px;">
   Hi, <span style="color: #ff0000;">have a nice day!</span>
  </span>
 </span>
</p>

我需要将黑色文本设为白色，并且我需要将红色文本保持为红色。

我知道我可以使用 elementor 给它上色。但我需要它为暗模式考虑 CSS。

我试过了： p span span { color: red !important; } 但有时 elementor 在p span span 中使用黑色文本进行段落，所以整个段落都是红色的。

谢谢。

【问题讨论】：

这能回答你的问题吗？ Can I write a CSS selector selecting elements NOT having a certain class or attribute?

标签： css wordpress elementor

【解决方案1】：

我可以为没有特定类的元素编写 CSS 代码，但是只有样式？

是的，你可以。这是基于您的示例的 sn-p。

*[style] {
  text-transform: uppercase;
}

<p>
  <span style="color: #000000; font-family: Poppins;">
  <span style="font-size: 18.6667px;">
   Hi, <span style="color: #ff0000;">have a nice day!</span>
  </span>
  </span>
  <p class="lowercase">this is lowercase text</p>
</p>

为了回答您的评论，这里是一个覆盖所有元素CSS 的示例，您可以更改它以匹配您想要的结果；

*[style] {
  text-transform: uppercase;
}
p span[style] {
  color: white !important;
  background: #000;
}
p span[style] span[style] {
  color: indigo !important;
  background: white;
}
p span[style] span[style] span[style]{
  color: darkgreen !important; // this has to be like that to override the style setting the text color to red.
}

<p>
  <span style="color: #000000; font-family: Poppins;">
  this is white text
  <span style="font-size: 18.6667px;">
   Hi, <span style="color: #ff0000;">have a nice day!</span>
  </span>
  </span>
  <p class="lowercase">this is lowercase text</p>
</p>

【讨论】：

我只需要“祝你有美好的一天！”红色的。（黑字变白）
@Jarda_H 我有点困惑，因为文本已经是红色的。它有style="color: #ff0000"，所以我编辑了我的答案并写了如何覆盖它。不幸的是，对于元素的style 属性中存在颜色设置的元素，您将不得不使用!important。
对不起，我不擅长解释 :D 但 elementor 有时会延迟，因此它会产生更多或更少的跨度。但我使用了其他人的代码。无论如何感谢您的帮助。

【解决方案2】：

您可以执行以下操作以仅选择具有 #000000 内联样式的文本

span[style="color: #000000"] {
  color: grey !important;
}

<span style="color: #000000">First words</span>
<span style="color: #FF0000">Other words</span>

【讨论】：

谢谢。我稍微修改了一下。我在颜色代码后添加了分号，并且效果很好。