如何僅將樣式應用於父元素？

我有這樣的HTML：如何僅將樣式應用於父元素？

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

我怎麼能寫樣式TD元素，這會不會影響孩子SPAN元素？在我的情況下，SPAN必須保持正常的文本轉換。

請注意，我只能修改TD的樣式。

來源

2016-01-26 Vladislav Kurkotov

的可能的複製[應用樣式父，如果它與CSS的孩子（http://stackoverflow.com/questions/21252551/apply-style-to-parent-if- it-has-child-with-css） –

你不能這樣做。 CSS級聯向下。您需要修改子項''的樣式以覆蓋您在其父''中執行的任何操作，或者將您不希望級聯的樣式放在兄弟元素中而不是父級中（' style unstyled text'）。 –

爲跨度的默認樣式是text-transform: inherit。

如果沒有它的繼承，沒有辦法改變它的父類的風格，而不是明確地將它設置爲不同的值。

來源

2016-01-26 16:15:15 Quentin

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

來源

2016-01-26 15:49:51 tohood87

謝謝你的回答，但如果我能這樣做，我就不會問你了。 –

關於純CSS，這裏有一個關於CSS中父母選擇器的有趣頁面：https：//css-tricks.com/parent-selectors-in-css/ - 它被認爲是幾年前，但從未到位性能問題等我想不出一種CSS方式來實現你所需要的。 – tohood87

您無法從可繼承屬性（例如text-transform）停止CSS inheritance。

但是，您可以通過將規則重寫爲其初始值（即text-transform:none）來重置子元素上的樣式。

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

您還可以使用通用選擇器*來定位所有元素。

td * { 
 
    all: initial; 
 
}

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

來源

2016-01-26 16:27:05 Stickers

如何僅將樣式應用於父元素？

回答

相關問題