css判斷某元素的子元素個數(shù)并分別設(shè)置樣式的方法
發(fā)布時間：2018-01-17 16:24:30 作者：雨花石 
我要評論
我要評論這篇文章主要介紹了css判斷某元素的子元素個數(shù)并分別設(shè)置樣式的方法的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
工作時遇到這樣一個問題:根據(jù)某元素所包含的子元素個數(shù)，分別設(shè)置不同的樣式，這個用js可以解決，不過個人認(rèn)為用css解決可能更簡單一點。這也正好加深了我對css選擇器的理解和運用。
demo如下：
效果圖如下
完整代碼如下：
<!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, 是倒數(shù)第二個元素，又是第一個元素，說明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，字體顏色為藍(lán)色*/
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇重點介紹CSS中的:befor、:after創(chuàng)建的偽元素幾種使用場景，如填充文本、作為iconfont、進(jìn)度線、時間線以及幾何圖形，感興趣的朋友一起看看吧2018-02-07
詳解CSS nth-child與nth-of-type的元素查找方式
這篇文章主要介紹了詳解CSS nth-child與nth-of-type的元素查找方式的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-22
CSS 實現(xiàn)元素較寬不能被完全展示時將其隱藏的方法
最近做項目遇到這樣的需求，需要實現(xiàn)的樣式是固定寬度的容器里一排顯示若干個標(biāo)簽，數(shù)量不定，每個標(biāo)簽的長度也不定。下面小編給大家?guī)砹薈SS 實現(xiàn)元素較寬不能被完全展示2017-12-29- 在css3中，我們使用animation與keyframes結(jié)合，可以給元素添加各種各樣的動畫效果。這篇文章主要介紹了css3實現(xiàn)多個元素依次顯示效果,需要的朋友可以參考下2017-12-12
- 邊框操作是每位前端工程師們經(jīng)常會遇到的，下面這篇文章主要給大家介紹了關(guān)于單元素如何利用css實現(xiàn)多重邊框效果的相關(guān)資料，文中通過示例代碼給大家詳細(xì)介紹了實現(xiàn)的過程2017-09-18
- 這篇文章主要介紹了css3之UI元素狀態(tài)偽類選擇器 ,其中包括hover、active和focus,enabled,disabledread-only與read-write 等等,需要的朋友可以參考下2017-08-11
利用CSS3偽元素實現(xiàn)逐漸發(fā)光的方格邊框
這篇文章主要給大家介紹了利用CSS3偽元素實現(xiàn)逐漸發(fā)光的方格邊框的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來2017-05-07- 這篇文章主要介紹了css 獲取從第n個開始之后的所有元素 ,需要的朋友可以參考下2018-11-21
