Question

我有这样的HTML：

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

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

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

Answer 1

范围的默认样式为text-transform: inherit。

除非将其显式设置为不同的值，否则无法在不继承父级的情况下更改其父级的样式。

Answer 2

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");

Answer 3

您无法阻止CSS inheritance来自可继承属性，例如text-transform。

但是，您可以通过将规则重写为其初始值（即text-transform:none）来重置子元素的样式。

或使用all:initial重置所有样式。 http://caniuse.com/#feat=css-initial-value

您还可以使用通用选择器*来定位所有元素。

＆＃13;

td * {
  all: initial;
}

＆＃13;

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

＆＃13;

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

3 个答案: