html - 单选元素选择 Sass

Question

我有一个单选按钮，当我检查它时，它应该影响另一个元素。 我做不到。我尝试影响几个元素。没有任何效果。

我的 HTML 标记:

<label for="1">
        <div class="card card-1">
            <input class="card__input-1"type="radio" name="card" id="1">    
            <h4 class="card__header">10 GB / <span class="card__header--price">0$</span></h4>
            <ul class="card__list">
                <li class="card__list-item">10GB Space</li>
                <li class="card__list-item">Sync Devices</li>
                <li class="card__list-item">Free Forever</li>
                <li class="card__list-item">No Credit Card Required</li>
            </ul>

        </div>
         </label>

SASS:

.card__input-1:checked .card-1{
background-color: orangered;
}

没有错误消息。

Answer 1

您可以使用 + 或 ~ CSS 选择器来影响文档流中输入后面的元素，但它们共享相同的父级，如下所示:

.card__input-1:checked ~ .card-1 {
  background-color: orangered;
}

<label for="1">
  <input class="card__input-1"type="radio" name="card" id="1"> 
 
  <div class="card card-1">
    <h4 class="card__header">10 GB / <span class="card__header--price">0$</span></h4>
    
    <ul class="card__list">
      <li class="card__list-item">10GB Space</li>
      <li class="card__list-item">Sync Devices</li>
      <li class="card__list-item">Free Forever</li>
      <li class="card__list-item">No Credit Card Required</li>
    </ul>
  </div>
</label>

+ 选择器允许您选择文档流中紧随其后出现的元素，~ 选择器允许您选择后面的任何元素(因此有点像“ super 加”选择器)。

但是要影响父元素，您需要使用 JavaScript