問題描述
我只想將樣式應用于具有特定類的 DIV 內的表:
注意:我寧愿為子元素使用 CSS 選擇器.
為什么 #1 有效而 #2 無效?
1:
div.test th, div.test td, div.test 標題 {padding:40px 100px 40px 50px;}2:
div.test th, td, caption {padding:40px 100px 40px 50px;}HTML:
<html><頭><風格>div.test >th，td，標題 {填充:40px 100px 40px 50px;}</風格></頭><身體><表格邊框="2"><tr><td>一些</td></tr><tr><td>數據</td></tr><tr><td>這里</td></tr></表></div><div 類="測試"><表格邊框="2"><tr><td>一些</td></tr><tr><td>數據</td></tr><tr><td>這里</td></tr></表></div></身體></html>我做錯了什么?
解決方案 這段代碼div.test th, td, caption {padding:40px 100px 40px 50px;}" 將規則應用于所有除了 all 之外，th 元素包含在具有名為 test 的類的 div 元素中td 元素和 所有 caption 元素.
它不同于一個divtd、th和caption元素> 具有 test 類的元素".為此，您需要更改選擇器:
'>' 不受某些舊瀏覽器的完全支持(我在看著你，Internet Explorer).
div.test th,div.test td,div.test 標題 {填充:40px 100px 40px 50px；}
I want to apply styles only to the table inside the DIV with a particular class:
Note: I'd rather use a css-selector for children elements.
Why does the #1 works and #2 doesn't?
1:
div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}
2:
div.test th, td, caption {padding:40px 100px 40px 50px;}
HTML:
<html>
<head>
<style>
div.test > th, td, caption {padding:40px 100px 40px 50px;}
</style>
</head>
<body>
<div>
<table border="2">
<tr><td>some</td></tr>
<tr><td>data</td></tr>
<tr><td>here</td></tr>
</table>
</div>
<div class="test">
<table border="2">
<tr><td>some</td></tr>
<tr><td>data</td></tr>
<tr><td>here</td></tr>
</table>
</div>
</body>
</html>
What am I doing wrong?
解決方案 This code "div.test th, td, caption {padding:40px 100px 40px 50px;}" applies a rule to all th elements which are contained by a div element with a class named test, in addition to all td elements and all caption elements.
It is not the same as "all td, th and caption elements which are contained by a div element with a class of test". To accomplish that you need to change your selectors:
'>' isn't fully supported by some older browsers (I'm looking at you, Internet Explorer).
div.test th,
div.test td,
div.test caption {
padding: 40px 100px 40px 50px;
}
這篇關于將 CSS 樣式應用于子元素的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！