CSS平級と息子級の様式の書き方

3113 ワード

と書く
input:checked+ol:inoputがcheckedを所有した後、平レベルのOLが所有するスタイルです.
input:checked+ol>li:の中の大きさは、inoputがcheckedを所有した後、平級のOLの下の息子世代のliのスタイルを指し、孫世代の継承はありません.
 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8" />
	<title>    (UI)          E:checked_CSS    _web          </title>
	<meta name="author" content="Joy Du(    ), [email protected], www.doyoe.com" />
	<style type="text/css">
		input[type=radio]:checked + span{background:blue;}
		input[type=radio]:checked + span:after{content:"      ";}
		
		input[type=checkbox]:checked + span{background:#f00;}
		input[type=checkbox]:checked + span:before{content:"      ";}
		div.classFather > div.classSon  div.classSon{
			background-color: lightgray;
			line-height: 40px;
		}
		div.classFather > div.classSon > div.classSonS > div.classSonC {
			background-color: lightgray;
			line-height: 40px;
		}
	</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
	<legend>        </legend>
	<ul>
		<li><label><input type="radio" name="colour-group" value="0" /><span>  </span></label></li>
		<li><label><input type="radio" name="colour-group" value="1" /><span>  </span></label></li>
		<li><label><input type="radio" name="colour-group" value="2" /><span>  </span></label></li>
	</ul>
</fieldset>
<fieldset>
	<legend>        </legend>
	<ul>
		<li><label><input type="checkbox" name="colour-group2" value="0" /><span>  </span></label></li>
		<li><label><input type="checkbox" name="colour-group2" value="1" /><span>  </span></label></li>
		<li><label><input type="checkbox" name="colour-group2" value="2" /><span>  </span></label></li>
	</ul>
</fieldset>
<fieldset>
	<legend>     </legend>
	<div class="classFather">
		<div class="classSon">  
			<div class="classSon">  
				<div class="classSon">   </div>
			</div>
		</div><br><br>
		<div class="classSon">  
			<div class="classSonS">  
				<div class="classSonC">   </div>
			</div>
		</div>
	</div>
</fieldset>
</form>
</body>
</html>