scss 第一个孩子，在伪类之后答案

【问题标题】：scss first child, after sudo classscss 第一个孩子，在伪类之后
【发布时间】：2021-06-03 04:14:56
【问题描述】：

我想选择 form-radio-label 元素的第一个子元素。我知道这很有效：

.form {
  &-radio-input:checked ~ &-radio-label &-radio-button::after {
    opacity: 1;
  }
}

但是为什么不能使用&-radio-input:checked ~ &-radio-label &:first-child::after？

HTML：

<div class="form-group">
                  <div class="form-radio-group">
                    <input type="radio" class="form-radio-input" id="small" name="size" />
                    <label for="small" class="form-radio-label">
                      <span class="form-radio-button"></span>
                      Small tour group
                    </label>
                  </div>

                  <div class="form-radio-group">
                    <input type="radio" class="form-radio-input" id="large" name="size" />
                    <label for="large" class="form-radio-label">
                      <span class="form-radio-button"></span>
                      Large tour group
                    </label>
                  </div>
                </div>

【问题讨论】：

我可能错了，但您不会错过选择器-radio-label 吗？ &:first-child::after 与 &-radio-label:first-child::after
鉴于您的 html 示例，您的表单单选按钮始终是第一个子项 - 您真的需要第一个子项选择器还是您想实现其他目标？但正如 alba 所说，您错过了第一个子选择器的选择器，以便编译为 .form:first-child::after （并且标签内没有第一个子类的表单，这就是它不起作用的原因） - 如果你想要标签中的任何第一个孩子，无论类别如何，删除& 所以它只是&-radio-input:checked ~ &-radio-label :first-child::after
我也尝试过：&-radio-input:checked ~ &-radio-label:first-child::after { opacity: 1; }，但它也不起作用。我只是想了解一些基础知识，这就是我提出问题的原因。无论如何谢谢:)

标签： html css sass css-selectors

【解决方案1】：

CSS 只能以降序工作。从上到下，而不是从子/从到父/以上元素。必须将附加的伪类添加到需要的元素本身。他们只是在查看命名元素是否是第一个孩子。为了解释，我使用 CSS 输出，因为它更容易理解：



//#### Working Example
.form-radio-input:checked ~ .form-radio-label .form-radio-button::after

--> .form-radio-label and .form-radio-label 
    are descending to the classes named before 
    (the elements are descending to the elements before)
    so they will be found by CSS
--> .form-radio-button::after
    names pseudo class of the whanted element direct
    so it is added direct to the wanted element



//#### NOT Working Example 1
.form-radio-input:checked ~ .form-radio-label .form:first-child::after
--> .form-radio-label is descending to .form-radio-input
    so this will be found
--> .form IS NOT descending element to .form-radio-label (but parent)
    so css will not find it



//#### NOT Working Example 2
.form-radio-input:checked ~ .form-radio-label:first-child::after
--> .form-radio-label:first-child::after
    means: a element with this class which itself is first child 
    but that is not the element you are looking for
    you are looking for the first child IN element .form-radio-label
    and that is span.form-radio-button:first-child
    which you have selected in working example

【讨论】：

【解决方案2】：

您已经为第一个孩子指定了一个班级，因此您可以通过使用该班级来做到这一点。但是如果你想使用 :first-child 选择器，我会给出一个例子。希望对你有帮助

.form-radio-group{
.form-radio-input {
.form-radio-label {
.form-radio-button {
      opacity:1;
}
}
}   
}
//OTHERWISE FOR CSS SELECTOR
.form-radio-group{
.form-radio-input {
.form-radio-label{
.form-radio-button:first-child::after {
    content:"";
    position:absolute;
      opacity:1;
}
}
}   
}

【讨论】：