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