如何仅将某个div的某些元素放入CSS框中

我正在参加CSSzenGarden挑战赛。我不得不改变它的样式。我试图把这些段落放在一个盒子里，而不是把h3放在盒子里面。我希望h3位于包含段落的框之上。如何仅将某个div的某些元素放入CSS框中

<div class="preamble" id="zen-preamble" role="article"> 
     <h3>The Road to Enlightenment</h3> 
     <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p> 
     <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <abbr title="World Wide Web Consortium">W3C</abbr>, <abbr title="Web Standards Project">WaSP</abbr>, and the major browser creators.</p> 
     <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p> 
    </div>

当我使用.preamble作为css选择器时，它将整个div放在方框内。当我使用.preamble p作为选择器时，它将每个段落放在一个单独的框中。

如何在不包含h3的情况下将所有段落选为一个组？

来源

2014-08-30 Goose

使用margin-top具有正值和负值。

.preamble { 
    border: 1px solid black; 
    margin-top: 20px 
} 
.preamble h3 { 
    margin: -20px 0px; 
}

http://jsfiddle.net/3ez4qh3m/

至于具体的选择：你不能做到这一点。您可以选择整个容器.preamble或单个元素.preamble p,.preamble h3但您不能选择容器而排除其子项。

来源

2014-08-30 10:47:24

作品。优秀。这个想法之前，玩弄了，但无法让它工作。 – Goose 2014-08-30 10:52:18

等等，我需要摆脱盒子顶部的空白空间。有没有办法抵消这一点？ – Goose 2014-08-30 10:55:46

请参阅上面的修改。我忘了补偿底部边距。 – 2014-08-30 10:59:42

您可以选择您div.preamble元素中的所有元素p像这样：

div.preamble > p { 
    /* some nice styling goes here */ 
}

这将选择所有的直接的div.preable元素的孩子是段落元素。

您还可以选择特定类型的像这样的所有儿童（所以不一定直接）：

div.preamble * { 
    /* even more nice styling goes here */ 
}

你可以用任何你喜欢的元素替换星号，或者留在选择的所有childeren div.preamble。我希望这能清除一切，祝你好运！

我刚刚注意到我没有完全回答你的问题。你不能在段落周围制作一个盒子，因为一个盒子并不意味着任何东西，除非可能将你的段落包装在一个实际元素中，例如div。但是，您可以给所有段落相同的背景颜色：

div.preamble > p { 
    background-color: red; 
}

或者把边框周围：

/* put a border around all paragraphs and remove their margin */ 
div.preamble > p { 
    margin: 0; 
    border: 1px solid green; 
} 

/* remove the bottom margin of the first and second paragraph 
* (remember that they are preceded by a heading element, so the 
* first paragraph is the second child) */ 
div.preamble > p:nth-child(2), div.preamble > p:nth-child(3) { 
    border-bottom: none; 
} 

/* remove the top margin of the second and third paragraph */ 
div.preamble > p:nth-child(3), div.preamble > p:nth-child(4) { 
    border-top: none; 
}

我认为这是接近你可以去让你的段落一盒。再次祝你好运。

来源

2014-08-30 10:55:17

这也将每个段落放入它自己的盒子中。 – Goose 2014-08-30 10:57:05

这个答案作为额外的可能性，因为你完成了。

这里的表格的布局可能是有用的，并会保留一切在文档的常规流程：DEMO

基本CSS：

.preamble { 
    display:table; 
    width:100%; 
    table-layout:fixed; 
    background:/* whatever */; 
    border:double; /* whatever, optionnal */ 
} 
.preamble h3 { 
    display:table-caption; 
    background:/* whatever */; 
    text-align:center;/* whatever, optionnal */ 
    margin:1em 0;/* whatever, optionnal */ 
}

<edit data-why="any feed back ?"/>

get this h3 outside

来源

2014-08-30 11:18:09

如何仅将某个div的某些元素放入CSS框中

回答

相关问题