css - 在第一个元素前面显示第二个 元素

Question

我试图让第二个同级元素显示在第一个元素的前面 - 但有一些严格的限制:

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

我只能使用 CSS。

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

左侧菜单具有上述许多 HTML 结构，为页面上的部分构建可点击的菜单。当页面部分完成时，“完成部分”类将添加到第一个跨度(如上所示)。这就是导致我出现问题的原因:

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

我怎样才能将第二个跨度“移动”到第一个跨度前面，以便我可以看到它的文本？

我也尝试过将两个跨度设为绝对位置或相对位置并使用 z-index 但这会将跨度从文档流中拉出，并意味着菜单的宽度会折叠。我无法将宽度设置为硬编码值，因为菜单会在宽度方向切换打开和关闭(没有设置类)并且切换的宽度由 javascript 设置，同样，我无法访问。

我还尝试在“a”元素上使用 display:flex 并反转 span 元素的“顺序”。运气不好。

在半绝望中，我尝试将“nav-link”上的方向属性设置为 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>

我也尝试过“flex-direction”，但我现在已经将其注释掉了。

Answer 1

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

这是 fiddle :

.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>