您现在的位置是:网站首页> 编程资料编程资料
用css完成根据子元素不同书写样式的方法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
2021-08-29
1580人已围观
简介 这篇文章主要介绍了用css完成根据子元素不同书写样式的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
我们需要达到的效果:
需要什么
1张图片的, 2张图片的, 3张图片的样式各不相同。可以使用js完成子元素的判断,但是这里我使用css来完成
核心知识点
使用css选择器完成子元素的判断
例子:
用css选择器匹配只有一个元素
div { &:last-child:nth-child(1) { // 相关样式 } }
很好理解:div下面即是最后一个元素也是第一个元素不就是只有一个子元素吗?
用css选择器匹配只有两个子元素
div{ &:nth-last-child(2):nth-child(2) { } }
依样画瓢:最后第二个元素也是第二个元素不就代表,这个div下只有两个元素吗
完成样式
html部分
{{item.name}}
{{item.fabulousNumber}}
css部分
.box { padding: 0.26rem; .header { display: flex; align-items: center; img { width: 0.58rem; height: 0.58rem; margin-right: 0.17rem; } } .bottom { display: flex; justify-content: space-between; align-items: center; color: #999999; font-size: 0.17rem; img { width: 0.17rem; height: 0.17rem; } } .content { display: flex; margin: 0.17rem 0; img { flex: 1; height: 1.37rem; width: 0; margin-right: 0.09rem; &:last-child { margin-right: 0; } &:last-child:nth-child(1) { height: 2.75rem; } } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相关内容
- CSS3改变浏览器滚动条样式详解css3自定义滚动条样式写法CSS3自定义滚动条样式的示例代码CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
- 浅谈CSS3 动画卡顿解决方案CSS3实现超慢速移动动画效果非常流畅无卡顿
- 纯CSS3实现漂亮的input输入框动画样式库(Text input love)HTML中利用div+CSS实现简单的箭头图标的代码css 11种方法实现一个tips带有描边的小箭头css实现带箭头和圆点的轮播可自定义箭头样式的CSS3气泡提示框CSS3制作可自定义配置箭头的气泡提示框效果源码基于CSS实现带阴影和小箭头的黑色风格下拉菜单效果CSS实现让同一行文字和输入框对齐的方法利用HTML、CSS 实现带表情的评论框的制作教程CSS实现带箭头的提示框效果【示例代码】
- CSS3下的渐变文字效果实现示例css 进度条的文字根据进度渐变的示例代码css3实现文字扫光渐变动画效果的示例CSS3文字背景色渐变过渡特效源码CSS实现文字高光水波渐变的动态效果实例一款纯css3实现的颜色渐变按钮的代码教程使用CSS3的背景渐变Text Gradient 创建文字颜色渐变CSS 网页文字渐变效果css实现文字颜色渐变的三种方法
- css自定义属性和聚光灯效果的实现最新Edge浏览器将支持CSS自定义属性深入解析CSS中的自定义属性css如何实现自定义更为美观的链接提示效果初步认识css自定义属性
- 纯CSS实现红绿灯效果(面试常见)你应该知道的5个CSS面试问题小结前端HTML+CSS笔试题面试题前端面试必备之CSS3的新特性面试时可能被问到的一些CSS问题CSS常见面试问题汇总(推荐)
- css制作超萌吃豆豆加载动画效果纯CSS3实现的多层圆环loading加载动画特效源码纯CSS3实现带有卫星轨道旋转效果的加载动画特效源码CSS 的加载及加载顺序简介css3 animation制作loading白色圆点滑过加载动画特效源码纯CSS3仿Skype圆点旋转加载动画特效源码html5+css3实现的多彩旋转式svg加载动画特效源码CSS制作提示框 ‘正在加载请。。。。。’
- css制作收缩圆环旋转效果实例代码css3 clip实现圆环进度条的示例代码图解CSS3制作圆环形进度条的实例教程CSS实现圆环旋转加载动画实现CSS圆环的5种方法(小结)
- CSS3 仿微信聊天小气泡实例代码纯CSS实现聊天框小尖角、气泡效果CSS实现聊天气泡效果
- CSS3效果:自定义“W”形运行轨迹实例纯CSS3制作逼真的汽车运动动画特效源码纯CSS3绘制的太阳系行星动画运动轨迹效果源码HTML5和CSS3炫酷图片运动模糊和倾斜特效源码纯css3实现可以运动的红色自行车动画jquery+css3动态圆圈运动背景特效代码CSS3 3D运动步数统计样式特效源码