TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊
Use flexbox :
.wrapper{
display :flex;
flex-direction: column-reverse;
}
<div class='wrapper'>
<p>A</p>
<p>B</p>
<p>C</p>
</div>
TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊
使用 CSS
您可以通過指定顯示來反向排序項(xiàng)目flex。
div {
display: flex;
flex-direction: column-reverse;
}
<div>
<p>A</p>
<p>B</p>
<p>C</p>
</div>
或者，您可以通過沿方向軸翻轉(zhuǎn)子元素來轉(zhuǎn)換子元素。翻轉(zhuǎn)整個(gè)div，然后p在 div 內(nèi)翻轉(zhuǎn)每個(gè)。雖然這有效，但應(yīng)該避免使用flex. 注意：轉(zhuǎn)換元素后，選擇會(huì)變得非常不穩(wěn)定。
div, p {
transform: scale(1, -1);
}
<div>
<p>A</p>
<p>B</p>
<p>C</p>
</div>
使用 JavaScript
您也可以在 JavaScript 中使用一個(gè)函數(shù)來執(zhí)行此操作，該函數(shù)遍歷節(jié)點(diǎn)childNodes并將它們插入到第一個(gè)子節(jié)點(diǎn)之前。
/**
* @describe Reverses the child nodes of a node in-place.
* @param {Node} node - The parent of the child nodes to be reversed
*/
const reverseChildNodes = node => {
for (let i = 1; i < node.childNodes.length; i++) {
node.insertBefore(node.childNodes[i], node.firstChild);
}
}
if (Element.prototype.reverseChildren === undefined) {
Element.prototype.reverseChildren = function() {
reverseChildNodes(this);
};
}
// Global function
reverseChildNodes(document.querySelector('.section:first-child'));
// Prototype method on Node object
[...document.querySelectorAll('.section')].pop().reverseChildren();
.section { border: thin solid grey; margin: 0.25em; padding: 0.25em; }
<div class="section">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
<div class="section">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
舉報(bào)