Heim >Web-Frontend >CSS-Tutorial >CSS bestimmt die Anzahl der untergeordneten Elemente
CSS bestimmt die Anzahl der untergeordneten Elemente
- php中世界最好的语言Original
- 2018-03-20 14:12:318189Durchsuche
Dieses Mal werde ich Ihnen CSS zur Bestimmung der Anzahl der Unterelemente vorstellen. Was sind die Vorsichtsmaßnahmen zur Bestimmung der Anzahl der Unterelemente in CSS? Hier ist ein praktischer Fall .
Ich bin bei der Arbeit auf ein solches Problem gestoßen: Festlegen verschiedener Stile entsprechend der Anzahl der in einem Element enthaltenen Unterelemente. Dies kann mit js gelöst werden, aber ich persönlich denke, dass es mit CSS möglicherweise einfacher zu lösen ist. Dies hat auch mein Verständnis und die Anwendung des CSS-Selektors vertieft.
Die Demo lautet wie folgt:
Rendering Der vollständige Code lautet wie folgt:
Der vollständige Code lautet wie folgt:
<!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>
Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Fall in diesem Artikel Weitere spannende Informationen finden Sie im Artikel zur chinesischen PHP-Website.
Empfohlene Lektüre:
Wie man eine Raupen-Krabbelanimation realisiert
Canvas erstellt rotierende Tai-Chi-Animationen
Das obige ist der detaillierte Inhalt vonCSS bestimmt die Anzahl der untergeordneten Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!