可以通过css让列表项首先出现吗？答案

【问题标题】：Possible to make a list item appear first via css?可以通过css让列表项首先出现吗？
【发布时间】：2016-06-13 19:21:24
【问题描述】：

我有一个 jquery 移动列表视图，我想通过 CSS 将 li 项目之一出现首先在列表中代码。我不希望 li 项目处于固定位置（换句话说，我确实希望它与列表一起滚动）。我只是想让它看起来像是第一个 li 项目。

这是列表的代码（只有 2 li 项）。所以我想知道如何设置第二个 li 首先出现的样式。

<div data-role="page" data-theme="c"> 
<div data-role="content">
<ul data-role="listview" data-inset="false"><li>
    <a href="http://domain.com/1XyK?id=1117448578">
    <img src="https://domain.com/moreicon/EN/bundle-loseweight.png" />
    <h2>Healthy Weight Loss</h2>
    <p>Now includes Mindful Eating!</p>
    <span class="ui-li-count">NEW</span>
    </a>
</li>
<li>
    <a href="http://domain.com?id=977040364">
    <img src="https://domain.com/moreicon/EN/bundle-top10.png" />
    <h2>Our Top 10 Apps!</h2>
    <p>Save BIG on our chart toppers!</p>
    <span class="ui-li-count">SAVE</span>
    </a>
</li>

这可能吗？

【问题讨论】：

发布您目前拥有的代码，我们将看看如何提供帮助
为什么不在 DOM 上移动它？
不是动态生成的。它只是一个静态列表，样式看起来像一个 jquery 移动列表视图。

标签： css listview jquery-mobile

【解决方案1】：

如果您的浏览器支持允许，一种可能性是 Flexbox。这允许您通过使用子级的order 属性来控制元素的顺序。

例如，如果您的 HTML 是：

<ul>
  <li>First</li>
  <li>Second</li>
</ul>

然后，您可以在 CSS 中将 UL 设置为柱状弹性框：

ul {
  display: flex;
  flex-direction: column;
}

你可以给你想带上的孩子分配一个否定的order：

ul li:nth-of-type(2) {
  order: -1;
}

工作示例：http://codepen.io/honzie/pen/oLxENz

【讨论】：

我不知道 Flexbox，谢谢！如果我正确理解了 nth-of-type 属性，我不确定这个解决方案是否考虑了我试图移动的 li 项目的不同位置。此 2 项列表只是一个示例。在实际场景中，将有 15 多个项目，并且我尝试移动的项目会有所不同（其在列表中的原始位置也会有所不同）。可以以非相对方式使用此解决方案吗？
我想我知道如何调整您的解决方案。我只是将 li 样式更改为一个类，并将该类分配给我要移动的列表项。并且 order 属性 (-1) 使其首先出现。谢谢！
你的改编很到位。我远离钥匙。在实际解决方案中，基于类可能比人为设计的nth-child 选择器更有意义。我很高兴这对你有用。
将 li 的 order 设置为 -1 以将其移至开头（如上），并将其设置为非常大的值（即 99）以将其移至末尾并保持在添加新项目时结束。例如，只要项目总数小于 99。