时间戳

首页 > 解决方案 > 超越内联 CSS

html - 超越内联 CSS

问题描述

我有一个树结构，我可以在其中展开和折叠节点。每个节点都被分配了内联 CSS 高度顶部和左侧。在渲染期间根据节点的位置动态计算顶部和左侧。我想将节点的高度40px降低到，并将每个节点的顶​​部和左侧减少一个20px* 节点位置。如何使用 CSS 实现这一目标？我无权直接更改发生计算的代码。唯一允许修改的方法是从 CSS 文件。

例子：

<div class="node" style="height: 62px; position: absolute; top: 0px;"></div>
<div class="node" style="height: 62px; position: absolute; top: 62px;"></div>
<div class="node" style="height: 62px; position: absolute; top: 124px;"></div>
<div class="node" style="height: 62px; position: absolute; top: 186px;"></div>
<div class="node" style="height: 62px; position: absolute; top: 248px;"></div>

这些是应用于每个节点顶部的内联 CSS。我希望每个节点的顶​​部减少 20* 节点索引。第 1 个节点，第 2 个节点，第 20 个节点，第 3 个节点，第 40 个节点，第 4 个节点，第 60 个节点，依此类推。

非常感谢您对此的任何帮助。

更新：

使用 Scss 或更少可以实现这一点吗？

标签： htmlcsssassless

解决方案

您可以编写一个外部 CSS 文件来执行此操作，如下所示：

.node{
    height: 40px!important;
    margin-top: -20px;
    margin-left: 20px;
}

此代码将完成您的工作，但不要忘记提供!importantCSS 代码行。!important如果外部 CSS 文件中有相同的 CSS 参数，将覆盖内联 CSS。

注意：内联 CSS 不会被删除，只是不会对外部 CSS 起作用。所以不要担心。只需转到您的外部 CSS 文件并在其中使用!important.

如果您不想使用!important，可以使用下面的此代码，它也可以正常工作。

.node{
    max-height: 40px;
    margin-top: -20px;
    margin-left: 20px;
}

推荐阅读