css - 将相邻兄弟 CSS 组合符 (+) 与 HgClass 和动态值一起使用

Question

我只是想弄清楚这是否可能，或者我是否需要重新考虑我处理事情的方式。

Here's a very simple idea of where I'm at

我的主列表将不断有其他进程添加和删除的元素。我使用 NgFor 生成我的元素，我在我的样式表 (+) 中使用相邻的兄弟组合器将 margin-top 添加到除了第一项，然后 ngClass 应用类本身。
到目前为止所有的上帝...

现在我希望 margin-top 的值也是动态的，并与来自其他服务的值相关联。

所以我的问题是，任何人都可以给我一种使用相邻兄弟选择器的方法以及它所应用的样式的动态值吗？

Answer 1

由于渲染的 CSS 还不能跨浏览器做变量，一个选择是一个小脚本添加这样的 style

window.addEventListener('load', function() {
  loadStyle(20);
  setTimeout(function() { loadStyle(40); }, 1000);
  setTimeout(function() { loadStyle(60); }, 2000);
})

function loadStyle(margin) {
  var node = document.querySelector('my-app style') || document.createElement("style");
  var css = ".my-item+.my-item{margin-top: "+margin+"px;}"
  node.type = 'text/css';
  if (node.styleSheet){
    node.styleSheet.cssText = css;
  } else {
    node.appendChild(document.createTextNode(css));
  }
  document.querySelector('my-app').appendChild(node);
}

.my-item{
  background-color: red;
}
.my-item+.my-item{
  margin-top: 20px;
}

<my-app>
  <div class='my-item'>A</div>
  <div class='my-item'>B</div>
  <div class='my-item'>C</div>
</my-app>