将CSS样式应用于子元素
我只想用一个特定的类将样式应用于DIV中的表格：
注意：我宁愿使用一个CSS的select器的儿童元素。
为什么＃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>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>
我究竟做错了什么？
这个代码“ div.test th, td, caption {padding:40px 100px 40px 50px;} ”除了所有的 td元素和所有 caption外，还将一个规则应用于所有由包含一个名为test的类的div元素的元素元素。
它与“具有一个test类的div元素所包含的所有td ， th和caption元素”不一样。 要做到这一点，你需要改变你的select器：
“ > ”并不完全支持一些旧的浏览器（我看着你，Internet Explorer）。
div.test th, div.test td, div.test caption { padding: 40px 100px 40px 50px; }
.test * {padding: 40px 100px 40px 50px;}
> select器只与直接的孩子相匹配，而不是后代。
你要
div.test th, td, caption {}
或更可能
div.test th, div.test td, div.test caption {}
编辑：
第一个说
div.test th, /* any <th> underneath a <div class="test"> */ td, /* or any <td> anywhere at all */ caption /* or any <caption> */
而第二个说
div.test th, /* any <th> underneath a <div class="test"> */ div.test td, /* or any <td> underneath a <div class="test"> */ div.test caption /* or any <caption> underneath a <div class="test"> */
在你原来的div.test > th说any <th> which is a **direct** child of <div class="test"> ，这意味着它会匹配<div class="test"><th>this</th></div> <div class="test"><table><th>this</th></table></div>
如果你想添加样式在所有的孩子和没有规范的HTML标签，然后使用它。
父标签div.parent
div.parent内的子标签，如<a> ， <input> ， <label>等
code： div.parent * {color: #045123!important;}
你也可以删除重要的，它不是必需的
不要忘记，IE6及以下版本的>，+和[]select器不可用。
这是我最近写的一些代码。 我认为它提供了将类/ ID名称与伪类相结合的基本解释。
.content { width: 800px; border: 1px solid black; border-radius: 10px; box-shadow: 0 0 5px 2px grey; margin: 30px auto 20px auto; /*height:200px;*/ } p.red { color: red; } p.blue { color: blue; } p#orange { color: orange; } p#green { color: green; }
<!DOCTYPE html> <html> <head> <title>Class practice</title> <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" /> </head> <body> <div class="content"> <p id="orange">orange</p> <p id="green">green</p> <p class="red">red</p> <p class="blue">blue</p> </div> </body> </html>
div.test td, div.test caption, div.test th
为我工作。
子select器>在IE6中不起作用。
据我所知，
div[class=yourclass] table { your style here; }
或者在你的情况下甚至这样：
div.yourclass table { your style here; }
（但是这对于yourclass可能不是div的元素将起作用）只影响你的类中的表。 而且，正如Ken所说的那样，这个>并不是在任何地方都支持的（而div[class=yourclass]也是这样，所以在类中使用点符号）。
