如何仅将样式应用于父元素？

Posted 2023-03-06

【中文标题】如何仅将样式应用于父元素？

【英文标题】：How to apply style only to the parent element?

【发布时间】：2016-05-03 05:31:04

【问题描述】：

我有这样的 html：

<table>
  <tr>
    <td style="text-transform: uppercase;">
      Some text node.
      <span>Some text in span</span>    
    </td>
  </tr>
</table>

如何为 TD 元素编写不会影响子 SPAN 元素的样式？在我的情况下，SPAN 必须保持正常的文本转换。

请注意，我只能为 TD 修改样式。

【问题讨论】：

Apply style to parent if it has child with css的可能重复

你不能这样做。 CSS 向下级联。您需要修改子 <span> 的样式以覆盖您在其父 <td> 中所做的任何事情，或者将您不想级联的样式放在兄弟元素而不是父元素中 (<td><span style="text-transform:uppercase">styled text</span><span>unstyled text</span></td>) .

【参考方案1】：

CSS：

td span 
    text-transform:none;

内联 CSS：

<table>
  <tr>
    <td style="text-transform: uppercase;">
      Some text node.
      <span style="text-transform: none;">Some text in span</span>    
    </td>
  </tr>
</table>

JS：

$("td span").css("text-transform", "none");

【讨论】：

谢谢你的回答，但如果我能这样做，我就不会问你了。

关于纯 CSS，这里有一个关于 CSS 中父选择器的有趣页面：css-tricks.com/parent-selectors-in-css - 几年前就考虑过，但由于性能问题等原因从未实施过。我可以不要想着用 CSS 方法来实现你所需要的。

【参考方案2】：

span 的默认样式是text-transform: inherit。

除了显式地将其设置为不同的值外，没有其他方法可以更改其父级的样式而不继承它。