Heim >Web-Frontend >CSS-Tutorial >Informationen zum Schreiben horizontaler und untergeordneter CSS-Stile
Informationen zum Schreiben horizontaler und untergeordneter CSS-Stile
- 不言Original
- 2018-06-26 10:23:532590Durchsuche
In diesem Artikel erfahren Sie hauptsächlich, wie Sie CSS-Flat- und Son-Level-Stile schreiben, die besser für Anfänger geeignet sind. Freunde, die CSS lernen, können darauf verweisen
input:checked+ol: Das ist Über den korrekten Inoput verfügt nach der Überprüfung der Stil, der dem entsprechenden OL gehört.
input:checked+ol> Das Größer als in li: bezieht sich auf den li-Stil der Nachkommen des OL, der derselbe ist wie nach der Überprüfung durch inoput, und die Enkel werden ihn nicht erben.
Html-Code
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>用户界面(UI)元素状态伪类选择符 E:checked_CSS参考手册_web前端开发参考手册系列</title>
<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:" 我被选中了";}
p.classFather > p.classSon p.classSon{
background-color: lightgray;
line-height: 40px;
}
p.classFather > p.classSon > p.classSonS > p.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>
<p class="classFather">
<p class="classSon">孩子
<p class="classSon">孙子
<p class="classSon">重孙子</p>
</p>
</p>
<p class="classSon">孩子
<p class="classSonS">孙子
<p class="classSonC">重孙子</p>
</p>
</p>
</p>
</fieldset>
</form>
</body>
</html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
Vertikale sekundäre Navigation implementiert mit CSS3
So verwenden Sie CSS3, um einen kreisförmigen Fortschrittsbalken zu implementieren
Der Rand dreht sich, wenn die Maus mit CSS3 bewegt wird
Das obige ist der detaillierte Inhalt vonInformationen zum Schreiben horizontaler und untergeordneter CSS-Stile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!