用css完成根据子元素不同书写样式
我们需要达到的效果:
需要什么
1张图片的, 2张图片的, 3张图片的样式各不相同。可以使用js完成子元素的判断,但是这里我使用css来完成
核心知识点
使用css选择器完成子元素的判断
例子:
- 用css选择器匹配只有一个元素
div {
&:last-child:nth-child(1) {
// 相关样式
}
}
很好理解:div下面即是最后一个元素也是第一个元素不就是只有一个子元素吗?
- 用css选择器匹配只有两个子元素
div{
&:last-nth-child(2):nth-child(2) {
}
}
依样画瓢:最后第二个元素也是第二个元素不就代表,这个div下只有两个元素吗
完成样式
- html部分
``` <div class="box" v-for="(item,index) in list" :key="index">
<div class="header">
<img :src="item.userImage" alt="">
<span>{{item.name}}</span>
</div>
<div class="content">
<img :src="v" alt="" v-for="(v, i) in item.imageUrl" :key="i">
</div>
<div class="bottom">
<span class="left-icon">{{item.createTime}}</span>
<div class="right">
<img src="./img/6.1.png" alt="">
<span>{{item.fabulousNumber}}</span>
</div>
</div>
</div>
```
- 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;
}
}
}
}
来源:https://segmentfault.com/a/1190000017524238
用css完成根据子元素不同书写样式的更多相关文章
- weex中css不能使用子元素选择器
weex中css不能使用子元素选择器 刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑
- 小程序scroll-view组件使用时,子元素虽设置样式display:inline-flex;whit-space:nowrap
小程序scroll-view组件使用时,子元素虽设置样式display:inline-flex;whit-space:nowrap
- css 选择器之子元素
/*html*/ <div class="wrap"> <span>1</span> <span>2</span> &l ...
- css 文字和子元素水平垂直居中
关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来.这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下: 1 .文字水平垂直居中 这个比较简单, ...
- 透视 HTML子元素的margin-top样式会应用在父元素上的原由
情况说明 当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{ma ...
- CSS 控制鼠标在元素停留的样式
以下资料来自网络,收藏学习总结用: 有时候需要改变鼠标样式,DIV 可以改成手型等,A也可以改成光标形式 巧合要用到鼠标样式效果,就顺便整理了下十五种CSS鼠标样式,小例子供大家使用啊.CSS鼠标样式 ...
- 过滤选择器first与子元素过滤选择器first-child的区别
1.表格代码如下: <table id="table"> <tr> <td>id</td> <td>name</t ...
- css:子元素div 上下左右居中方法总结
最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...
- 兼容性背景颜色半透明CSS代码(不影响内部子元素)
如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid ...
随机推荐
- Python:Dom生成XML文件(写XML)
http://www.ourunix.org/post/327.html 在python中解析XML文件也有Dom和Sax两种方式,这里先介绍如何是使用Dom解析XML,这一篇文章是Dom生成XML文 ...
- c++打印蛇形矩阵
一个m*n的矩阵里按照下图形式填充,最后形成的矩阵即为蛇形矩阵,下图是m=4, n =5时的蛇形矩阵: 方法一:逐层循环 #include <iostream> using namespa ...
- 《HTML 5网页开发实例具体解释》样章、内容简单介绍、前言
http://spu.jd.com/1167757597.html http://product.dangdang.com/23484942.html 样章 http://download.csdn. ...
- Android中多线程编程(三)Handler更新UI的方式
Handler更新UI的方式和原因以及遇到的问题 1.方式: 仅仅能通过Handler来更新UI. 代码例如以下: package com.chengdong.su.handlerdemo; impo ...
- 利用python 掌握机器学习的过程
转载:http://python.jobbole.com/84326/ 偶然看到的这篇文章,觉得对我挺有引导作用的.特此跟大家分享一下. 为了理解和应用机器学习技术,你需要学习 Python 或者 R ...
- quartus2 13.0+modelsim联合开发环境搭建(win10)
quartus2用于硬件设计代码的综合,检查是否有语法错误:modelsim用于对硬件设计代码进行仿真,观察波形是否与需求一致,需要编写xxx_tb.v才能仿真 一.quartus2安装见这篇文章ht ...
- Memcached下载、安装及使用演示。
Memcached下载及安装: 下载地址: memcached-1.4.5-amd64.zip================================================通过cmd ...
- 《Lucene in Action》(第二版) 第二章节的学习总结 ---- IndexWriter+Document+Field
这一章节的学习,主要是学会如何创建索引,使用索引 一.创建索引 1.从原始文件中提取内容.这里的文件,可以是文本文件,也可以是二进制文件.文本文件(txt),lucene可以直接处理:而二进制文件(w ...
- 搭建apphouse(docker镜像私服)
1.下载apphouse,地址为http://www.youruncloud.com/soft.html2.上传AppHouse_v1.0.2.tar到服务器并解压3../apphouse_insta ...
- Hibernate3中generator标签使用
在XXX.hbm.xml映射配置文件中定义<generator class="native"/>标签是为了告诉Hibernate框架使用什么方式去生成主键class对应 ...