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

Question

我需要为使用 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 中用黑色文本做段落，所以整个段落都是红色的。

谢谢。

Answer 1

Can I write a CSS code for elements NOT having a certain class, but only style?

是的，你可以。这是基于您的示例的片段。

*[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>

Answer 2

您可以对 select 只有内联样式为 #000000

的文本执行以下操作

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

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

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

Can I write a CSS code for elements NOT having a certain class, but only style?

css

wordpress

elementor