将CSS样式应用于子元素 [英] Apply CSS Style to child elements
问题描述
我想只对DIV中的表应用样式，其中包含特定的类：
注意：我宁愿对子元素使用css选择器。
为什么＃1有效，＃2无效？
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>一些< / td>< / tr>
< tr>< td> data< / td>< / tr>
< tr>< td>这里< / td>< / tr>
< / table>
< / div>
< div class =test>
< table border =2>
< tr>< td>一些< / td>< / tr>
< tr>< td> data< / td>< / tr>
< tr>< td>这里< / td>< / tr>
< / table>
< / div>
< / body>
< / html>
我做错了什么？
解决方案这个代码
div.test th，td，caption {padding：40px 100px 40px 50px;}code> test 元素中包含的code> th 元素td元素和全部标题 td，th元素。
和元素包含在。要完成此操作，您需要更改您的选择器：div元素c> test
'
>浏览器（我在看你，Internet Explorer）。div.test th，
div.test td，
div.test caption {
padding：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 doesnt?
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 allthelements which are contained by adivelement with a class namedtest, in addition to alltdelements and allcaptionelements.It is not the same as "all
td,thandcaptionelements which are contained by adivelement with a class oftest". 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样式应用于子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
