html - CSS:使用两个通用选择器来选择相同的元素

Question

如何使用通用同级选择相同的元素。我需要尝试使用 checkbox:checked 技术将其用作开关(一些实验)。

input:checked:after{
//I wanted two psuedo class to work together
//but this selector isnt valid
  
  content:"text";
}

//so i tried below

input:checked ~ span ~ input:after{
  content:"text";

//but above isnt working either
}

<input type="checkbox" checked><span></span>

Answer 1

CSS 的注释标记就像

/*  Comment */

为了让您的 CSS 运行，我不得不删除上面的那些//标记。我能够让代码像这样工作:

input[type='checkbox']:checked ~ span::after{
     content:'text';
}

使用 HTML:

<input type="checkbox" checked><span></span>

我的输出是一个选中的复选框，后面有单词“text”。请注意，我需要伪元素双冒号标记。它与与“checked”一起使用的伪类冒号标记有点不同。

引用资料: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements https://www.w3.org/TR/css3-selectors/