Heim > Artikel > Web-Frontend > Informationen zum Schreiben horizontaler und untergeordneter CSS-Stile

Informationen zum Schreiben horizontaler und untergeordneter CSS-Stile

不言Original: 2018-06-26 10:23:532529Durchsuche

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!

php css css3 html 继承 input li

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS erzielt den Effekt, dass Text Bilder umschließtNächster Artikel：CSS erzielt den Effekt, dass Text Bilder umschließt

In Verbindung stehende Artikel

Mehr sehen