CSS 选择器 同级元素 紧随元素

HTML

<div class="pay-cont">
	<label>
		<input type="radio" checked="checked" name="pay-type">
		<img src="default/user/order/img/pay-wx.png">
		<span class="checked"></span>
	</label>
	<label>
		<input type="radio" name="pay-type">
		<img src="default/user/order/img/pay-zf.png">
		<span class="checked"></span>
	</label>
	<label>
		<input type="radio" name="pay-type">
		<img src="default/user/order/img/pay-jd.png">
		<span class="checked"></span>
	</label>
</div>

CSS

// 紧邻input之后的图片元素
input[type="radio"] + img {
	padding: 20px;
	border-radius: 3px;
	border: 2px solid #f1f1f1;
	cursor: pointer;
}
// 在input之后的span元素 （与input同一父级）
input[type="radio"] ~ span {
	display: none;
}
input[type="radio"]:checked + img {
	border: 2px solid #00aec4;
	cursor: default;
}
input[type="radio"]:checked ~ span {
	content: ' ';
	width: 16px;
	height: 16px;
	display: block;
	position: absolute;
	right: 10px;
	top: 10px;
	background: url('../img/checked.png?v=@{version}') no-repeat center center;
}