html div父集子集,抛砖引玉css系列---根据父元素包含的子元素个数,实现不同的样式...

工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决,不过个人认为用css解决可能更简单一点。这也正好加深了我对css选择器的理解和运用。

demo如下:

bVRC8F?w=216&h=240

bVRC8R?w=1020&h=88

bVRC9i?w=1021&h=175

bVRC9x?w=1018&h=333

效果图如下

bVRC9U?w=888&h=109

完整代码如下:

css3

*{

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;

}

  • 11111
  • 11111
  • 22222
  • 11111
  • 22222
  • 33333

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/355389.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

rnn按时间展开_双向RNN的理解

我们在学习某种神经网络模型时,一定要把如下几点理解透了,才算真正理解了这种神经网络。网络的架构:包含那些层,每层的输入和输出,有那些模型参数是待优化的前向传播算法损失函数的定义后向传播算法什么情况下认为是发…

Eclipse新建java类的时候,自动创建注释

为形成个人的java代码风格,我们在项目组中进行开发的时候,可以对自己的代码进行一些格式上面的设置,具体如下: 方法一:Eclipse中设置在创建新类时自动生成注释 windows–>preference Java–>Code Style–>Code Templates…

endnote能自动翻译吗_自动挡和手自一体有啥区别?从外表能看出一辆车是哪种变速箱吗?...

汽车分自动挡和手动挡,手动挡就是一个手动变速箱,很好理解。但自动挡变速箱有很多种,前几日有人问了这么几个问题,没来得及回复,现在超时不能单独回复了,在此详细说一下,因为这是一个非常基础且…

html5平板电脑,Html5添加支持桌面、移动触摸手机和平板电脑的Lightbox插件教程

一、使用方法首先在标签之前或标签中引入jquery和swipebox js文件。在标签中引入swipebox.css文件。二、Html结构三、调用插件;( function( $ ) {$( .swipebox ).swipebox();} )( jQuery );四、高级配置(1)画廊(2)视频支持My Videos(3)动态调用画廊$( #gallery ).click( functi…

idea 内存溢出解决方法

在Run/Debug configuration 的 vm options里面输入 -server -XX:PermSize128M -XX:MaxPermSize256m 具体如下图: 转载于:https://www.cnblogs.com/Liang-Haishan216/p/7044028.html

网页设计html加音频,HTML5网页中如何嵌入音频,视频?

《HTML5的视频播放控制技术》 介绍了本文主要介绍在HTML5 中如何嵌入音频,视频?在HTML5 中如何嵌入音频?HTML5 支持 MP3、Wav 和 Ogg 格式的音频,代码示例:Your browser does’nt support audio embedding feature.HTM…

seo 伪原创_胡子哥谈seo优化:那些不被了解的伪原创技巧

各位小伙伴们好,我是没有胡子的胡子哥,玩转SEO多年的老互联网人。(胡子哥推出包上首页服务,无效退款,有技术就是敢承诺!)做SEO优化的人都知道,一个网站提升权重的过程中,文章的原创度占比是很高…

javafx2_JavaFX 2 GameTutorial第3部分

javafx2介绍 Ť他是与一个六个部分组成的系列的第3部分的JavaFX 2游戏教程。 如果您错过了第1部分和第2部分 ,我建议您在开始本教程之前仔细阅读它们。 回顾第2部分,我讨论了游戏循环的内部工作原理,其中我们使用动画(JavaFX Time…

dw中html中无法使用js,在Dreamweaver中调用JavaScript行为

调用JavaScript行为可以指定在事件发生时要执行的自定义函数或者JavaScript代码。可以自己书写这些JavaScript代码,也可以使用网络上免费发布的各种JavaScript库。一、Dreamweaver调用JavaScript行为1. 选择一个对象。2. 打开行为面板。3. 点击“添加行为()”按钮&a…

带有JBoss工具的OpenShift 3上的Java EE 7应用程序

您可以使用最新版本的JBoss Tools OpenShift插件在Eclipse中创建和管理OpenShift应用程序。 他们要么预先捆绑了最新的 JBoss Developer Studio(9.0.0.GA) ,也可以将它们安装到现有的Eclipse Mars中。 这篇文章将引导您通过JBoss Developer …

自动检测技术学习心得体会_国培计划(2020)—学校管理团队信息化领导力提升培训心得体会...

点击蓝字关注我吧国培计划(2020)—学校管理团队信息化领导力提升培训心得体会2020年10月28日,由裕安区教师进修学校承担的2020年“国培计划(2020)- 学校管理者信息化领导力培训项目在全体学员的期待下正式拉开序幕。精心设计的培训课程精彩纷呈的课堂培训的内容和我…

安宁计算机学院,滁州学院张燕咏、安宁两位教授应邀来我院指导工作

应计算机与信息工程学院邀请,美国罗格斯大学张燕咏教授、合肥工业大学安宁教授于6月9、10日两天来我院进行学术交流和实验室建设方案讨论。6月9日上午,信息学院刘进军、姚光顺两位教师向两位教授汇报了信息学院的实验室建设思路、特别是物联网专业实验室…

六元均匀直线阵的各元间距为_给棉花地选购滴灌带时记住这几点,不再为棉花滴水时发愁...

现在马上进入棉花大量采收阶段,好多农户已经把棉花地里的90管拆了拉回来了,而且不少滴灌带生产厂家也主动和农户联系2021年的滴灌带兑换事项,农户们也在相互打听哪家的质量好、价格合适。选择滴灌带是棉花生产过程中较为重要的环节&#xff0…

javafx_JavaFX 2 GameTutorial第2部分

javafx介绍 Ť他的是一系列与一个JavaFX 2游戏教程博客条目的第二批。 如果您尚未阅读第1部分,请参阅JavaFX 2游戏教程的简介部分。 在第1部分中,我提到了游戏的一些方面以及原型飞船的简单演示(原型由简单的形状组成)&#xff0c…

sql 如何根据月份查询数据总数_什么是慢查询?如何通过慢查询日志优化?

日志就跟人们写的日记一样,记录着过往的事情。但是人的日记是主观的(记自己想记的内容),而数据库的日志是客观的,根据记录内容分为以下好几种日志:a、错误日志:记录启动、运行或停止mysqld时出现的问题。b、通用日志&a…

查询分析器在哪里_你应该知道的3种Node.js分析器类型

Node.js类似于许多其他编码语言,因为它需要与正确的工具结合使用来调试程序,克服任何瓶颈并优化其功能。使用正确的分析器,您可以毫不费力地实现这一目标,尽管它们都不是完美的。在编码中,分析器是一种动态程序分析软件…

全国计算机一级选择题汇总,全国计算机一级考试选择题训练及答案

全国计算机一级考试选择题训练及答案练习题一1、 将二进制数110B左移一位后其等值的十进制数为()。A、6 B、1100 C、12 D、32、 某微型机的CPU中含有32条地址线、28位数据线及若干条控制信号线,对内存按字节寻址,其最大内存空间是()。A、4MBB、256MBC、2…

python url拼接_教你写python爬虫——用python爬原图

环境:python3.6 pycharm“猎物”:http://www.polayoutu.com (仅学习用)动机1:想要爬一些尺寸比较大(不是尺度)的美图养养眼,仅此而已;动机2:学习python爬虫&…

Devoxx的Red Hat Engineers提供了更多Java EE

现在是Devoxx比利时时间! 最后。 今天的一切都随着大学会议的开始而开始,会议本身将于明天早晨开始。 我们都非常兴奋,因为这是欧洲的重大事件。 红帽很荣幸今年再次成为赞助商。 我们将在现场举行14次会议,一个展位–提供啤酒&am…

济宁医学院计算机专业好就业吗,山东这3所医学院实力强,就业率高,中等生可捡漏...

原标题:山东这3所医学院实力强,就业率高,中等生可捡漏山东的医药类院校中,实力较强的是山东大学医学院、青岛大学医学院、山东第一医科大学、山东中医药大学,这4所医学院的录取分数都比较高。今天给大家介绍山东3所二批…