将 CSS 样式应用于子元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/632100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply CSS Style to child elements
提问by roman m
I want to apply styles only to the table inside the DIV with a particular class:
我只想将样式应用于具有特定类的 DIV 内的表：
Note: I'd rather use a css-selector for children elements.
注意：我宁愿为子元素使用 css-selector。
Why does the #1 works and #2 doesn't?
为什么#1 有效而#2 无效？
1:
1：
div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}
2:
2：
div.test th, td, caption {padding:40px 100px 40px 50px;}
HTML:
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?
我究竟做错了什么？
回答by Ken Browning
This code "div.test th, td, caption {padding:40px 100px 40px 50px;}" applies a rule to all thelements which are contained by a divelement with a class named test, in addition to alltdelements and allcaptionelements.
除了所有元素和所有元素之外，此代码“ div.test th, td, caption {padding:40px 100px 40px 50px;}”将规则应用于具有名为 的类th的div元素所包含的所有元素。testtdcaption
It is not the same as "all td, thand captionelements which are contained by a divelement with a class of test". To accomplish that you need to change your selectors:
它与“所有td，th以及caption由div类为test”的元素所包含的元素不同。为此，您需要更改选择器：
'>' isn't fully supported by some older browsers (I'm looking at you, Internet Explorer).
>某些较旧的浏览器不完全支持“ ”（我在看您，Internet Explorer）。
div.test th,
div.test td,
div.test caption {
padding: 40px 100px 40px 50px;
}
回答by Richard Edwards
.test * {padding: 40px 100px 40px 50px;}
回答by Greg
The >selectormatches direct children only, not descendants.
在>选择匹配直接孩子而已，没有后代。
You want
你要
div.test th, td, caption {}
or more likely
或者更有可能
div.test th, div.test td, div.test caption {}
Edit:
编辑：
The first one says
第一个说
div.test th, /* any <th> underneath a <div class="test"> */
td, /* or any <td> anywhere at all */
caption /* or any <caption> */
Whereas the second says
而第二个说
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"> */
In your original the div.test > thsays any <th> which is a **direct** child of <div class="test">, which means it will match <div class="test"><th>this</th></div>but won't match <div class="test"><table><th>this</th></table></div>
在你的原文中div.test > thsay 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>
回答by user1369111
If you want to add style in all child and no specification for html tag then use it.
如果要在所有子项中添加样式并且没有 html 标签规范，请使用它。
Parent tag div.parent
父标签 div.parent
child tag inside the div.parent like <a>, <input>, <label>etc.
在div.parent里面像子标签<a>，<input>，<label>等。
code : div.parent * {color: #045123!important;}
代码 ： div.parent * {color: #045123!important;}
You can also remove important, its not required
您也可以删除重要的，它不是必需的
回答by Mark
Here is some code that I recently wrote. I think that it provides a basic explanation of combining class/ID names with pseudoclasses.
这是我最近写的一些代码。我认为它提供了将类/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>回答by Traingamer
div.test td, div.test caption, div.test th
works for me.
为我工作。
The child selector > does not work in IE6.
子选择器 > 在 IE6 中不起作用。
回答by tunnuz
As far as I know this:
据我所知：
div[class=yourclass] table { your style here; }
or in your case even this:
或者在你的情况下甚至这个：
div.yourclass table { your style here; }
(but this will work for elements with yourclassthat might not be divs) will affect only tables inside yourclass. And, as Ken says, the > is not supported everywhere (and div[class=yourclass]too, so use the point notation for classes).
（但这适用于yourclass可能不是divs 的元素）只会影响yourclass. 而且，正如 Ken 所说，并非所有地方都支持 >（div[class=yourclass]同样，对类使用点表示法）。
回答by greguintow
This code can do the trick as well, using the SCSS syntax
这段代码也可以使用 SCSS 语法来解决这个问题
.parent {
& > * {
margin-right: 15px;
&:last-child {
margin-right: 0;
}
}
}
