在某些场景下,我们需要根据兄弟元素的总数来为它们设置样式。最常见的场景就是,当一个列表不断延长时,通过隐藏控件或压缩控件等方式来节省屏幕空间,以此提升用户体验。

  • 为保证一屏内容能展示更多的内容,需要将多余的列表项隐藏。
  • 二级导航菜单:当菜单项为 1 项时,宽度为 100%;当菜单项为 2 项时,每项宽度为 50%;当菜单项为 3 项时,每项宽度为 33.33333333%;当菜单项为 4 项及以上时,宽度不定,根据内容宽度调整,超出屏幕后滑动菜单查看隐藏的菜单。

不过,对 CSS 选择符来说,基于兄弟元素的总数来匹配元素并不简单。

一、设想一个列表,假设仅当列表项的总数大于 3 时就隐藏项目数 4 及之后的项。我们可以用 li:nth-of-type(4)来选中列表的第四个列表项,再使用 ~ 选择符选择后续的兄弟元素。

首页的产品中心仅展示四项,想要查看更多就需要点击“更多产品+”跳转到产品页,假如循环出的列表总数超过 4 项就隐藏

    li {
&:nth-of-type(4) ~ li {
display: none;
}
}

二、设想一个二级菜单,当列表项总数小于 5 时,菜单的宽度按照屏幕的宽度比例平均分配,当列表项大于等于 5 时,按照自身内容宽度自适应。

以第一个只有两项的列表为例,我们需要选择每一项,并且把其宽度设置为50%。要怎么选择两项中的每一项呢,似乎没有办法只能使用脚本来判断。不过 li:nth-of-type 表示父元素只有一个同一类型的子元素,它等同于 li:first-of-type:last-of-type 的集合,既是第一项又是最后一项,那我们就选中了只有一个项目时的这一项。用同样的思路,li:first-of-type:nth-last-of-type(2) 集合,表示既是第一项又是倒数第二项,那我们就选中了有两个项目时的第一项了,那么 li:first-of-type:nth-last-of-type(2) , li:first-of-type:nth-last-of-type(2)  ~ li 就选中了有两个项目时的每一项:

li {
&:first-of-type:nth-last-of-type(2),
&:first-of-type:nth-last-of-type(2) ~ li {
width: 50%;
}
}

如果一个列表有 3 项,把其宽度设置为 33.33333333%。

li {
&:first-of-type:nth-last-of-type(3),
&:first-of-type:nth-last-of-type(3) ~ li {
width: calc(100% / 3);
}
}

可以使用 SCSS 预编译器来处理

@mixin n-items($n) {
&:first-of-type:nth-last-of-type(#{$n}),
&:first-of-type:nth-last-of-type(#{$n}) ~ &{
width: calc(100% / #{$n});
}
} .sub-nav-item {
@include n-items(1);
@include n-items(2);
@include n-items(3);
@include n-items(4);
&:first-of-type:nth-last-of-type(n + 5),
&:first-of-type:nth-last-of-type(n + 5) ~ & {
padding-right: .15rem;
padding-left: .15rem;
}
}

扩展

上面调用中我们的目的是选择有 1 - 4 项的列表。如果能够调用一次就省心了。

需求:

当项目列表为 1 - 4 项时,将字体加粗

受启发 first-of-type:nth-last-of-type(n + 5) 限定了最小项目数为 5,那可不可以限定最大项目数呢,n 为负数可以实现限定最大数,但是 n 不可能为负数,不过可以给 n 取反。

first-of-type:nth-last-of-type(n + 5):nth-last-of-type(-n + 10) 集合中,当 n 取 0  时,-n + 10 最大,为 10,这时它表示范围为 5 - 10 的项目个数。

因此我们实现需求:

.sub-nav-item {
&:first-of-type:nth-last-of-type(n + 1):nth-last-of-type(-n + 4),
&:first-of-type:nth-last-of-type(n + 1):nth-last-of-type(-n + 4) ~ & {
font-weight: 500;
}
}

这时我们实现了根据兄弟元素的个数范围来设置样式

未加粗,此时有 6 项。

加粗,此时有 4 项。

加粗,此时有 3 项。

使用 CSS 根据兄弟元素的个数来调整样式的更多相关文章

  1. 前端学习 -- Css -- 兄弟元素选择器

    为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. < ...

  2. 同级兄弟元素之间的CSS控制

    为了实现这个导航效果:选中菜单中某一项,隐藏掉自身的左边背景线条,同时让他的下一个兄弟元素也隐藏掉线条. 有一种选择器就叫兄弟元素选择器,分为临近兄弟和普通兄弟. 临近兄弟:用 + 表示,只匹配该元素 ...

  3. css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器

    1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...

  4. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  5. CSS/块级元素与内联元素的深入理解

    今天终于对html中的块级元素和行内元素有了一个较为理性的认识.首先w3c对于block和inline的解释为:

  6. stylus选中hover元素的兄弟元素下的子元素

    stylus设置兄弟元素样式:鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ . ...

  7. CSS实现父元素半透明,子元素不透明

    CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明 ...

  8. jquery获取元素(父级的兄弟元素的子元素)

    一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...

  9. jQuery使用(四):DOM操作之查找兄弟元素和父级元素

    查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...

随机推荐

  1. Bootstrap中的datetimepicker插件用法总结(转载)

    datetimepicker用法总结   目录 datetimepicker用法总结 目录 简述 官方文档 选项属性 1 format 格式 2 weekStart 一周从哪一天开始 3 startD ...

  2. vps服务器搭建——Linode VPS 20美元优惠获取教程

    转载:http://www.cuishifeng.cn/linode/index.html?v=2 声明:本文旨在教大家怎么获得linode 20美元优惠,并免费使用4个月vps,请低调薅羊毛!(多张 ...

  3. jQuery扩展插件以及正则相关函数练习

    一.jQuery扩展插件 二.相关正则函数:

  4. 添加List集合覆盖问题

    今天在做一个项目的时候,发现了这样一个问题,为了让大家看得更直接明了,我直接放代码: public void InsertObjectToList(){ List<NewsProtetype&g ...

  5. Java常见的同步和异步的区别、特点、联系

    Java常见的同步和异步的区别.特点.联系   同步:发送一个请求,等待返回,然后再发送下一个请求 异步:发送一个请求,不等待返回,随时可以再发送下一个请求 同步可以避免出现死锁,读脏数据的发生,一般 ...

  6. 高并发第十单:J.U.C AQS(AbstractQueuedSynchronizer) 组件:CountDownLatch. CyclicBarrier .Semaphore

    这里有一篇介绍AQS的文章 非常好: Java并发之AQS详解 AQS全名:AbstractQueuedSynchronizer,是并发容器J.U.C(java.lang.concurrent)下lo ...

  7. JVM学习网址(收集总结)

    1.文章分类 - JVM调优总结   JVM综合调优汇总 星火燎原智勇 2018-08-16 11:11 阅读:8 评论:0 JVM调优04-概括总结 星火燎原智勇 2017-01-08 23:28 ...

  8. Wampserver环境配置

    ☆根目录修改问题 /.修改运行根目录 1.修改apache配置,将服务请求定位到新目录下 →左击wampserver,点击Apache打开httpd.conf文件,Ctrl+f搜索documentro ...

  9. 洛谷P4783 【模板】矩阵求逆(高斯消元)

    题意 题目链接 Sol 首先在原矩阵的右侧放一个单位矩阵 对左侧的矩阵高斯消元 右侧的矩阵即为逆矩阵 // luogu-judger-enable-o2 #include<bits/stdc++ ...

  10. Java反射机制动态代理

    1.什么事反射机制动态代理 在一段代码的前后动态执行其他操作,比如有一个方法是往数据库添加一个记录,我们可以通过动态代理,在操作数据库方法的前和后添加代码执行打开数据库连接和关闭数据库连接. 2.演示 ...