在同一个选择器中使用:: after和〜

Question

我想使用::after创建自定义单选按钮。我的HTML结构如下所示：

<div class='radio'>
  <input type='radio' class='radio-input'>
</div>

我想要的是向::after元素添加radio并在检查输入时应用一些样式。我写的（并且不起作用）是：

.radio-input:checked ~ .radio::after {
  ...
}

如果我使用的是元素而不是::after它可以使用，但我想知道为什么不这样做。

Answer 1

选择器.radio-input:checked ~ .radio::after无法使用您的标记的原因是因为您无法使用任何选择器定位祖先元素。你的孩子从孩子（.radio-input）开始，到父母（.radio），然后回到孩子伪。 CSS级联下来，它不会提升。

而是给输入一个真正的兄弟。在这里，我使用label，因为它符合可访问性标准，确保屏幕阅读器可以解释您的表单：

input:checked ~ label::before

标记如：

<input type="checkbox" name="dubstep" id="dubstep" value="dubstep" tabindex="0">
<label for="dubstep">dubstep</label>

参见示例：

＆＃13;

＆＃13;

ul.check-or-radio-set {
		list-style-type: none;
		padding: 0;
		margin: 0;
        position:relative;
	}

    ul.check-or-radio-set li {
      padding:0;
      margin:0 0 10px 0;
      height:1.6em;
    }

	ul.check-or-radio-set input {
		position: absolute;
		left: -9999em;
	}

	ul.check-or-radio-set input ~ label::before {
		background: white;
		border: 2px white solid;
		box-shadow: 0 0 0 1px darkGray;
		content: '\a0';
		display: inline-block;
		line-height: 1;
		text-indent: .15em;
	}

	ul.check-or-radio-set input[type=checkbox] ~ label {
        position: relative;
        margin-left: 32px;
		line-height: 1.4em;
	}

	ul.check-or-radio-set input[type=checkbox] ~ label::before {
        position: absolute;
		margin-left: -32px;
		height: 1.4em;
		width: 1.4em;
		border-radius: 4px;
		transition: all .3s;
		background-image: url(http://imgh.us/checkmark-white.svg);
		background-position: 50%;
		background-repeat: no-repeat;
		margin-right: 10px;
	}

	/* checked */
	ul.check-or-radio-set input:checked ~ label::before {
		background-color: orange;
	}

	ul.check-or-radio-set input:focus ~ label::before {
		box-shadow: 0 0 5px 1px #007fea;
	}
	ul.check-or-radio-set input:disabled ~ label {
		color: lightGray;
		cursor: not-allowed;
	}
	ul.check-or-radio-set input:disabled ~ label::before {
		background-color: gray;
		box-shadow: 0 0 0 1px darkGray;
	}

＆＃13;

<ul class="check-or-radio-set">
  <li>
    <input type="checkbox" name="rock" id="rock" value="rock" tabindex="0">
	<label for="rock">rock</label>
  </li>
  <li>
    <input type="checkbox" name="pop" id="pop" value="pop" tabindex="0" checked="checked">
	<label for="pop">pop</label>
  </li>
  <li>
    <input type="checkbox" name="dubstep" id="dubstep" value="dubstep" tabindex="0">
	<label for="dubstep">dubstep</label>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

注意：我从这里获得了这种模式：https://standards.usa.gov/form-controls/ - 它是制作外观漂亮的表单控件的绝佳资源。