来自非父元素的CSS位置

Question

我有一个编码限制，我无法改变并尝试找到解决方法，根据非父母来定位div。

我有以下代码结构，无法更改：

<div class="row">
   <div class="sub-row01"></div>
   <div class="sub-row02"></div>
</div>
<div class="row">
   <div id="sub-row03"></div>
</div>

我要做的是将＃sub-row03与.sub-row02相关联。我试过的任何东西，只允许我将＃sub-row03放在第一个.row

的位置

我想要实现的是什么？如果是这样，那么设计风格的正确方法是什么？

Answer 1

要回答你的问题，纯css是不可能的，因为它只允许使用父母或前一个孩子进行样式化。

例如

a + b { } will style b
a ~ b { } will style b
a > be {} will style b 

但在这些情况下无法设置样式。

但是你可以通过javascript来做到这一点。如果你想走这条路，你可以做类似的事情：

document.getElementById("sub-row03").style.left = document.getElementById("sub-row02").offset().left;

如果有必要，我可以写一些更具体的内容，因为我没有测试它，但它应该有助于基本概念。