Question

我正在尝试创建一个在班级活跃时必须改变的点。

  <div class="dot"></div>
  <div class="dot"></div>

.dot{
    border: 2px solid red;
    border-radius: 100%;
    position: relative;
    width: 2em; height: 2em;
  }

.dot::before{
    content: "";
    display: block;
    position: absolute;
    width: 1em; height: 1em;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: red;
    border-radius: 100%;
}

因此，当我的用户单击点时，我会在javascript中将类激活，因此我将具有以下元素：

当点也同时激活类时，如何应用类dot::before？

我尝试：

  .dot::before{ .active {
    content: "";
    display: block;
    position: absolute;
    width: 1em; height: 1em;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: red;
    border-radius: 100%;
    }
  }

也尝试过：

  .active > .eye-dot::before{
    content: "";
    display: block;
    position: absolute;
    width: 1em; height: 1em;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: red;
    border-radius: 100%;
  }

但未应用before

Answer 1

.dot::before {
  content: '•';
  color: grey;
  margin-right: .5em;
}

.dot.active::before {
  color: red;
}

<div class="dot">inactive</div>
<div class="dot active">active</div>

仅当有其他课程时才如何申请一个课程？

1 个答案: