radio模拟点击事件

radio 的 checked 与 兄弟选择器 ~ 的用法

主要是这个问题搞了我很多次了记录一下

兄弟选择器~：必须是相同的父级元素才有效

错误 html：

	//这是错误的
	<ul class="slides">
		<div>
			<input type="radio" name="slide-inp" id="slide-inp1" checked>
			<input type="radio" name="slide-inp" id="slide-inp2">
			<input type="radio" name="slide-inp" id="slide-inp3">
		</div>
		<div class="coltrolls">
			<label for="slide-inp1"></label>
			<label for="slide-inp2"></label>
			<label for="slide-inp3"></label>
		</div>
	</ul>

html：

	<ul class="slides">
		<input type="radio" name="slide-inp" id="slide-inp1" checked>
		<input type="radio" name="slide-inp" id="slide-inp2">
		<input type="radio" name="slide-inp" id="slide-inp3">

		<div class="coltrolls">
			<label for="slide-inp1"></label>
			<label for="slide-inp2"></label>
			<label for="slide-inp3"></label>
		</div>
	</ul>

css：

.slides input[type="radio"]:nth-of-type(1):checked ~ .coltrolls label:nth-of-type(1) {
  background-color: #333;
}

.slides input[type="radio"]:nth-of-type(2):checked ~ .coltrolls label:nth-of-type(2) {
  background-color: #333;
}

.slides input[type="radio"]:nth-of-type(3):checked ~ .coltrolls label:nth-of-type(3) {
  background-color: #333;
}