À propos de la façon d'écrire des styles CSS horizontaux et de sous-niveaux-tutoriel CSS-php.cn

À propos de la façon d'écrire des styles CSS horizontaux et de sous-niveaux

不言

Libérer： 2018-06-26 10:23:53

original

2511 Les gens l'ont consulté

Cet article vous explique principalement comment écrire des styles CSS plats et au niveau fils, ce qui convient mieux aux débutants. Les amis qui apprennent le CSS peuvent s'y référer

input:checked+ol : Ceci est. à propos du bon Inoput a le style appartenant à son égal OL après sa vérification.
input:checked+ol> Le plus grand que dans li : fait référence au style li des descendants de l'OL qui est le même qu'après vérification d'inoput, et les petits-fils n'en hériteront pas.

Code HTML

<!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>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois. !

Recommandations associées :

Navigation secondaire verticale implémentée avec CSS3

Comment utiliser CSS3 pour implémenter une barre de progression circulaire

La bordure pivote lorsque la souris est survolée en utilisant CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!