Question

在下面的HTML中，可以影响“First Text”，例如，给它一个边距或宽度，而不影响第二和第三个元素。

<div id="first">
First Text
<div id="second">Second Text</div>
<span id="third">Third Text</span>
</div>

Answer 1

margin和width默认情况下永远不会有值inherit，但容器的大小会影响其子项的呈现（仅仅因为包装将在哪里发生）。

Answer 2

不要将代码与容器和内容元素混淆。这样你就像APAD1所说的那样，不会像你一样愿意这样做。

相反，使用容器元素并为每个内容元素使用一个新的子节点。这样，您可以使用first-child选择器访问单个子元素。

这对我有用：

<div id="highlight">
    <div id="first">First Text</div>
    <div id="second">Second Text</div>
    <div id="third">Third Text</div>
</div>

CSS：

div#highlight div:first-child{margin:10px;color:red}

这里的工作示例：http://jsfiddle.net/B5Ej9/

更新： TL; DR：使用给定的HTML无法进行任何丑陋的黑客攻击！

如果没有机会改变HTML，你将需要某种黑客来解决，因为（如Quentin）回答，所有子对象都自动从父对象继承width和margin在DOM中。以下示例可能适用于div左边缘的某些缩进，但我知道：这是一个丑陋的解决方法，应该只是澄清我的意思（以及为什么你可能会考虑让HTML成为改变）。在这里，您可以使用原始HTML：

<div id="first">
First Text
<div id="second">Second Text</div>
<span id="third">Third Text</span>
</div>

解决方法CSS：

div#first { margin: 20px; color: red; background: grey;}
div#first *:not(:root) { margin-left: -20px; color: blue}

这样，您将为first div添加一个边距，并将其继承给所有子节点（second和third），但不在根节点内的所有内容都将是在左边设置为负边距。但是看看背景（http://jsfiddle.net/vag58/），你会注意到所有子元素的背景仍然是遗传的，你永远不会改变它。

Answer 3

如果＆＃39;秒＆＃39;和第三个＆＃39;绝对需要成为“第一个”的孩子，然后你可以使用外部样式表来“先”＃39;和第二个＆＃39;的内联风格和第三个＆＃39;。

CSS选择不在其他元素中的文本

3 个答案: