CSS平級と息子級の様式の書き方
3113 ワード
と書く
input:checked+ol:inoputがcheckedを所有した後、平レベルのOLが所有するスタイルです.
input:checked+ol>li:の中の大きさは、inoputがcheckedを所有した後、平級のOLの下の息子世代のliのスタイルを指し、孫世代の継承はありません.
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>