HTML 文本/CSS 变量

Question

我想使用下面我的 HTML 代码中定义的简单显示光标。 它显示完美，但我希望能够通过变量设置光标位置。

我尝试了多种选择，但均未成功。

任何帮助将不胜感激......

CSS:

var-rudpos:-60px;

.trPic {
   width:400px;
   height:15px;
   no-repeat;
}
.trPic .port{
   position:relative;
   top:-0px;
   left: 0px;
   width:200px;
   height:15px;
   background:#ff0000;
   opacity:1;
}
.trPic .starboard{
   position:relative;
   top:-0px;
   left: 201px;
   width:200px;
   height:15px;
   background:#41c921;
   opacity:1;
}
.trPic .zero{
   position:relative;
   top:-2px;
   left: -2px;
   width:4px;
   height:19px;
   background:#0000ff;
   opacity:1;
}
.trPic .cursor{
   position:relative;
   top:-2px
   //left: var(rudpos);
   left: -60px;
   width:4px;
   height:23px;
   background:#000000;
   opacity:1;
 }

HTML:

<div class="trPic">
  <div class="port">
    <div class="starboard">
      <div class="zero">
        <div class="cursor"> </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您不能在 css 中定义变量，相反，您可以编写 LESS 并定义您的变量并在任何地方使用它们，然后将其编译为 css。