Question

所以我一直试图通过复选框状态触发我的CSS选择器，如下所示，但我没有运气来触发它。点击时应该发生的事情就是滴答声应该消失。

.i-cb input[type="checkbox"]:checked + label::before {
   display: none;
   width:0px;
   height: 0px;
}

JSFiddle ：https://jsfiddle.net/7tnepc8r/4/

Answer 1

这是订单的问题。

您应该更改HTML的顺序。

+选择器用于选择紧接在第一个指定元素之后（而非内部）放置的元素。

.i-cb input[type=checkbox] {
  visibility: hidden;
}

.i-cb label {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  border: 4px solid #48c8f1;
  border-radius: 50%;
  border-top-color: transparent;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 0;
}

.i-cb label::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 45px;
  background-color: #93c83d;
  left: 22px;
  top: -15px;
  z-index: 1;
}

.i-cb label::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 6px;
  background-color: #93c83d;
  left: 10px;
  top: 24px;
  z-index: 1;
}

.i-cb input[type=checkbox]:checked + label::after {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
} 

.i-cb input[type=checkbox]:checked + label::before {
  display: none;
  width: 0px;
  height: 0px;
}

<div class="i-cb">
  <input id="check" type="checkbox" />
  <label for="check"></label>
</div>

Answer 2

您只需要更改标记顺序，因为您在输入后使用了@IBOutlet weak var text: UILabel! @IBOutlet var background: UIView! @IBOutlet weak var button: UIButton! @IBAction func play(_ sender: UIButton) { UIView.animate(withDuration: 1.5) { self.button.frame.origin.y = 30 self.button.frame.size.height = 200 self.button.frame.size.width = 130 self.button.backgroundColor = .yellow self.text.textColor = .white self.text.frame.origin.y += 110 self.background.backgroundColor = .black self.text.text = "Thanks for grabiN." // ..text = "Now click it until it's gone!" // ..text = "ComeOn you can do iT" // ..text = "Lest time" } }符号表示标签：

输入检查状态不会影响css选择器

2 个答案: