如何僅將某個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框中

回答

相關問題