CSS：使用两个通用选择器来选择相同的元素

如何使用通用同级选择相同的元素。这我需要尝试复选框：检查技术使用它作为开关（一些实验）。CSS：使用两个通用选择器来选择相同的元素

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>

来源

2016-07-14 Vetrivel

尝试'输入：检查+跨度{}'样式的''复选框时'checked'。 –

'::之后'::之前，两个冒号。 –

对CSS的批注标记就像

/* Comment */

为了让你的CSS跑，我不得不删除那些//标记，上面。我能够得到这样的代码工作：

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

与HTML：

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

我的产量选中复选框与后词“文本”。注意我需要伪元素双冒号标记。它与“checked”使用的伪类冒号标记有点不同。

参考文献： https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements https://www.w3.org/TR/css3-selectors/

来源

2016-07-14 18:42:23 gladiola

感谢评论部分// css行为试图达到的目标在这里被误解了。我想尝试在这个URL中给出的东西https://css-tricks.com/the-checkbox-hack/ – Vetrivel

这个例子有另一个部分：输入和它的标签之间的关系。在这个例子中，复选框只是远离视口。然而，标签与它相关联。当您进入演示页面时，请注意标签的另一个CSS声明块。这是一个重要的部分。 – gladiola

CSS：使用两个通用选择器来选择相同的元素

回答

相关问题