Question

我不知道我是否将标题命名为正确或使用了正确的术语，但我使用的是LESS。

我想要的是在某些<ul>上应用箭头，而默认为没有样式。所以，只要我想要箭头，我想在某种程度上明确地在代码中说出来。

我尝试添加一个名为.arrow的伪类：

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  .arrow{
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
  }
}

然后试图像这样应用它：

<ul className="arrow">
    <li><span className="ink-badge black small">Consulting</span></li>
</ul>

但没有运气。我做得不对;这里有什么想法吗？

Answer 1

className是IDL属性。在HTML中，您应该使用content属性，该属性称为class。

.arrow是一个类选择器，而不是伪类。

在选择器中，将祖先放在左边（LESS中的外部块）。

＆＃13;

body {
  margin-left: 2em;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.arrow > li {
  content: "";
  border-color: transparent #111;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.45em;
  display: block;
  height: 0;
  width: 0;
  left: -1em;
  top: 0.9em;
  position: relative;
}

＆＃13;

<ul class="arrow">
  <li><span class="ink-badge black small">Consulting</span></li>
</ul>

＆＃13;

如何将伪类应用于LESS

1 个答案: