当前位置: 首页 > Web前端 > CSS

使用css根据子元素完成不同的写法

时间:2023-03-30 15:25:42 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.createTime}{{item.fabulousNumber}}
css部分.box{padding:0.26rem;.header{显示:flex;对齐项目:居中;img{宽度:0.58rem;高度:0.58rem;右边距:0.17rem;}}.bottom{显示:flex;证明内容:空格之间;对齐项目:居中;颜色:#999999;字体大小:0.17rem;img{宽度:0.17rem;高度:0.17rem;}}.content{显示:flex;保证金:0.17rem0;img{弹性:1;高度:1.37rem;宽度:0;右边距:0.09rem;&:last-child{margin-right:0;}&:last-child:nth-child(1){身高:2.75rem;}}}}