在第一个

Question

我正在尝试在第一个同级元素之前显示第二个同级元素-有一些严格的限制：

我无法更改HTML或使用javascript或jQuery。

我只能使用CSS。

我无法更改类的分配方式（同样，除了一个定制的CSS文件之外，我无权更改任何代码）。

左侧菜单具有许多上述HTML结构，可为页面上的各个部分构建可单击的菜单。页面部分完成后，会将“ completed-section”类添加到第一个跨度（如上所示）。这就是导致我出现问题的原因：

导航链接“按钮”的CSS样式在完成时应该更改，但是由于我无法访问CSS选择的元素的父元素，因此需要直接对“菜单编号”范围进行这些更改元素，包括“导航链接”大小的背景色。因此，我已将菜单编号设置为与包含的“ nav-link”相同的大小。但是，当我在“菜单编号”中添加背景色时，第二个文本就会被遮盖。

如何在第二个跨度之前“移动”第二个跨度，以便查看其文字？

我也尝试过使跨度位置绝对或相对，并使用z-index，但这将跨度拉出文档流，这意味着菜单的宽度折叠了。我无法将宽度设置为硬编码值，因为菜单会沿宽度方向（不设置类）切换打开和关闭状态，并且切换后的宽度由javascript设置，这也是我无法访问的。

我也尝试过在display上使用display：flex，在a元素上反转span元素的order。没有运气。

在半绝望中，我尝试将“ nav-link”上的direction属性设置为rtl。没有运气。

我想我也尝试了其他一些方法，但是现在我将解决这个问题。

任何指针，非常感谢...

.menu-number {
	border: none;
	border-left: 10px solid transparent;
	border-radius: 0px;
	padding-top: 13px;
	padding-left: 20px;
	height: 45px;
	position: absolute;
	width: 100%;
	text-align: left;
	z-index: 100;
    float: left;
}
.menu-number + span {
	/*position: absolute;*/
	padding-left: 40px;
	z-index: 200;
}
.completed-section {
	color: #42bb76 !important;
	border-left: 10px solid #42bb76;
	background-color: #274d56;
	text-decoration: underline;
}
.nav-link > div > a {
	display: flex;
	*/flex-direction: row-reverse;*/
}
.nav-link > div > a > span:nth-of-type(1) {
    order: 2;
}
.nav-link > div > a > span:nth-of-type(2) {
    order: 1;
}
.nav-link > div > a > .section-name {
color: white;
padding: 13px 20px 0px 60px;
height: 45px;
    float: left;
}

<div class="nav-link">
    <div>
        <a href="scroll/to/section">
            <span class="menu-number completed-section">1.</span>
            <span class="section-name">Section name</span>
        </a>
    </div>
</div>

我也尝试过“弹性方向”，但是现在我已经注释掉了。

Answer 1

您可以使用CSS order属性来实现此目的：

这是小提琴：

.menu-number {
  order: 2;
}

.section-name {
  order: 1;
}

.nav-link a{
  display: flex;
}

<div class="nav-link">
  <div>
    <a href="scroll/to/section">
      <span class="menu-number completed-section">1.</span>
      <span class="section-name">Section name</span>
    </a>
  </div>
</div>