Maison >interface Web >tutoriel CSS >css détermine le nombre d'éléments enfants
css détermine le nombre d'éléments enfants
- php中世界最好的语言original
- 2018-03-20 14:12:318145parcourir
Cette fois je vais vous apporter du CSS pour déterminer le nombre de sous-éléments. Quelles sont les précautions pour déterminer le nombre de sous-éléments en css Voici un cas pratique, jetons un oeil. .
J'ai rencontré un tel problème en travaillant : définir des styles différents en fonction du nombre de sous-éléments contenus dans un élément. Cela peut être résolu avec js, mais je pense personnellement que cela peut être plus facile à résoudre avec css. Cela m'a également permis d'approfondir ma compréhension et mon application du sélecteur CSS.
La démo est la suivante :
Rendu Le code complet est le suivant :
Le code complet est le suivant :
<!DOCTYPE html>
<html>
<head>
<title>css3</title>
<style type="text/css">
*{
box-sizing:border-box;
}
ul{
width:100%;
margin:0;
padding:0;
font-size: 0;
}
li{
margin:0;
padding:0;
display:inline-block;
vertical-align: top;
font-size: 13px;
border:1px solid red;
height:30px;
}
/*ul只有一个子元素的样式*/
li:nth-last-child(1):first-child{
width:100%;
}
/*ul有2个子元素的样式*/
/*li:nth-last-child(2):first-child, 是倒数第二个元素，又是第一个元素，说明li的父元素ul有2个子元素（起到了 判断某父元素下有几个子元素 的作用）*/
li:nth-last-child(2):first-child,
/* ~ 选择位于li:nth-last-child(2):first-child 即 第一个子元素之后的元素*/
li:nth-last-child(2):first-child ~ li{
width:calc(100% / 2);
}
/*ul有3个子元素的样式*/
/*第一个元素宽度为1/3，字体颜色为蓝色*/
li:nth-last-child(3):first-child{
width:calc(100% / 3);
color:blue;
}
/*第一个元素之后的第一个元素（即 有3个子元素的ul 的 第 3 个元素）*/
li:nth-last-child(3):first-child ~ li:nth-last-child(1){
width:calc(100% / 4);
color:red;
}
/*第一个元素之后的第一个元素（即 有3个子元素的ul 的 第 2 个元素）*/
li:nth-last-child(3):first-child ~ li:nth-last-child(2){
width:calc(100% / 6);
color:yellow;
}
</style>
</head>
<body>
<ul class="list">
<li>11111</li>
</ul>
<ul class="list">
<li>11111</li>
<li>22222</li>
</ul>
<ul class="list">
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>
</body>
</html>
Je crois que vous maîtrisez la méthode après avoir lu le C'est le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à d'autres sujets connexes dans l'article du site Web PHP chinois !
Lecture recommandée :
Comment réaliser une animation rampante de chenille
La toile crée une animation de Tai Chi rotative
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!