使用 sass 将样式应用于父级答案

【问题标题】：Apply styles to parent using sass使用 sass 将样式应用于父级
【发布时间】：2022-01-26 18:03:52
【问题描述】：

假设我有这个结构：

<li>Something something  <input type="checkbox"></li>

选中复选框后，我如何将简单的text-decoration: line-through; 应用于li 内容？

我使用& sass 选择器尝试了这个，但没有成功：

li {
 & input:checked {
    text-decoration: line-through;
  }
}

编辑：我很欣赏所有的答案，但是我希望使用 sass 来做到这一点，我认为 & 父选择器具有此功能，但在我研究了一下之后，我发现它不应该以这种方式使用。尽管如此，我找到了一个没有调整结构或添加 javascript 的解决方案，我发现引导程序不会限制您将复选框放置在 li 内容之后以便将其显示在最右边的位置，您可以将它放在之前和它会自动将其粘贴到右侧，所以我这样做并将 li 内容放在span 中，所以我只选择了input:checked + span，这给了我想要的结果。

【问题讨论】：

一般来说，CSS 不能“回退”来影响元素的样式（尽管有时您可以让它看起来好像这对于简单的样式是可能的）。你能改变 HTML 吗？

标签： css sass

【解决方案1】：

你做不到。元素只能访问他的孩子和兄弟姐妹。

对于兄弟姐妹，有一个巧妙的技巧可以让您获得类似的结果。首先，您需要将复选框移到开头 (html)，以便您可以使用 ~ 选择器设置下一个兄弟姐妹的样式。

然后您可以将一些 css 规则应用于父级以交换回顺序。

div {
  display: flex;
  flex-flow: row-reverse;
}

div input[type="checkbox"]:checked ~ span {
  text-decoration: underline;
}

<div>
  <input type="checkbox">
  <span>Hallo Text</span>
</div>

【讨论】：

【解决方案2】：

抱歉，您不能，您需要 javascript 或 SassScript 来执行此操作，您可以试试这个https://sass-lang.com/documentation/style-rules/parent-selector

【讨论】：

【解决方案3】：

您不需要 Javascript，但您确实需要能够在 HTML 中添加一些内容。

如果你能够添加一个元素，你就可以做到——将文本放入它自己的 div 中并放在输入之后。

然后在 li 元素上使用 CSS 网格，改变输入和 div 的显示顺序。这只是改变了视觉顺序，因此您仍然可以使用 + 号来指示输入的紧随其后的同级元素。

li {
  display: inline-grid;
  grid-template-columns: auto auto;
}

li input:nth-child(1) {
  order: 2;
}

li div:nth-child(2) {
  order: 1;
}

input:checked+div {
  text-decoration: line-through;
}

<ul>
  <li><input id='input' type="checkbox">
    <div>Something something</div>
  </li>
</ul>

【讨论】：