CSS相邻兄弟选择器~解析：请求详解示例中的5种CSS选择器

结合你提供的HTML结构（class为script的<label>包含复选框<input>和同级的<span class="geekmark">），以下是5个选择器的具体含义：

• .script:hover input~.geekmark {}：鼠标悬停在class为script的label元素上时，所有位于该label内复选框input之后的同级.geekmark元素会被应用样式
• .script input:active~.geekmark{}：当class为script的label里的复选框input处于激活状态（比如点击按下但未松开鼠标时），所有位于该input之后的同级.geekmark元素会被应用样式
• .script input:checked~.geekmark {}：当class为script的label里的复选框input被勾选时，所有位于该input之后的同级.geekmark元素会被应用样式
• .script input:checked~.geekmark:after{}：当class为script的label里的复选框input被勾选时，所有位于该input之后的同级.geekmark元素的伪元素:after会被应用样式
• .script .geekmark:after{}：class为script的label元素下的所有.geekmark元素的伪元素:after会被应用基础样式

内容的提问来源于stack exchange，提问作者Kondaveti Charan