css兄弟选择器

最新推荐文章于 2024-05-28 11:31:46 发布
最新推荐文章于 2024-05-28 11:31:46 发布
阅读量8.4k 收藏 3
点赞数
分类专栏： css 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39122996/article/details/124276738
版权
本文介绍了如何使用CSS的:nth-child(), nth-last-child()和兄弟选择器(~, +)来实现循环遍历的数据分组，每行显示四组，最后一行不显示虚线边框的效果。通过设置特定的选择器组合，如4n+1, -n+4等，可以精确控制元素的边框样式，确保无论最后一行有多少组数据，都不会显示虚线。" 114441213,10474238,Spring Cloud Eureka详解与配置指南,"['java', '分布式', 'Spring Cloud']
摘要由CSDN通过智能技术生成

想要实现循环遍历的数据下面，每行添加虚线，最后一行不要，一行四组数据，显示效果如下

 

 

 

无论最后一行有几组数据，都不显示虚线，首先html样式结构 

<div class="list-box">
      <div class="app-box">
        标题名称1
      </div>
      <div class="app-box">
        标题名称2
      </div>
      <div class="app-box">
        标题名称3
      </div>
      <div class="app-bo
最低0.47元/天 解锁文章
陌紫芊宇
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【35】CSS3（1）—— 新增选择器②兄弟选择器
倏存的博客
04-08 1633
兄弟选择器1.介绍2. 相邻兄弟选择器3.其他兄弟选择器4.举例
【CSS兄弟选择器】
qq_44847590的博客
12-08 8387
最近写项目时，发现使用兄弟选择器频繁，特此总结一下常用的兄弟选择器，我常用于如果A存在，则给B加特定样式，若A不存在，B是其它样式的情况，使用兄弟选择器很方便，供参考。表示某元素后相邻的兄弟元素，也就是紧挨着的，选中的是单个的。选中h2下面的类名为on的元素 ： h2~.on{ }表示某元素后所有同级的指定元素，选中的是所有的。选中h2下面的第一个p ： h2+p{ }选中h2下面的所有p ： h2~p{ }
css 获取元素的前后一个兄弟元素
最新发布
u013521353的博客
05-28 247
记录一下。方便后面自取
CSS-兄弟选择器
主营前端方向，技术栈是vue
10-31 3211
兄弟选择器(后一个兄弟选择器，选中后边所有兄弟元素)
兄弟选择器(+ 和 ~)
热门推荐
justforuse的博客
01-08 2万+
1. + 选择器　　如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。 　　 　　比如：<style type="text/css"> h1 + p { margin-top:50px; color:red; } </style> <body> <p>This is paragraph.</p> <h1>This
css 兄弟选择器
wuyufei729的博客
06-11 285
1. ‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。
JSoup CSS选择器用法大全
08-15
下面将详细介绍 JSoup 支持的各种 CSS 选择器及其用法。 1. **基本选择器**： - `*`: 通配符选择器，匹配任何元素。 - `tag`: 按照元素名称选择，如 `div` 选择所有的 `<div>` 元素。 - `#id`: 通过元素的 ID ...
CSS的相邻兄弟选择器用法简单讲解
09-24
对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解:
详解css常用选择器
09-27
7. **相邻兄弟选择器**：使用`+`符号选择紧邻在另一元素之后的同级元素，如`h1+p`选择紧跟在`h1`元素后的`p`元素。 8. **分组选择器**：使用`,`分隔多个选择器，如`h2, p`将样式同时应用到`h2`和`p`元素。 9. **...
css 选择器 介绍
09-27
- **相邻兄弟选择器**：使用`+`符号选择紧跟在另一个元素之后的同级元素。例如，`h1 + p {margin-top: 0;}`将清除所有紧接在`h1`后的`p`元素的上外边距。 - **通用选择器**：星号`*`选择所有元素。`* {margin: 0;...
css 元素选择器的简单实例
09-24
例如，通过子选择器（`>`）和相邻兄弟选择器（`+`）来选择特定元素的子元素或相邻元素，实现更精准的样式定位。 总的来说，CSS元素选择器是CSS基础中的关键部分，它为我们提供了对HTML元素样式控制的能力。熟练掌握...
相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）等用法
weixin_34050005的博客
09-29 5415
前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用...
【CSS】浅谈css兄弟选择器
七十多岁的人了、
09-06 834
浅谈css兄弟选择器
css选择器
Cheny_Yang的博客
04-10 772
div<div>.class#idA BA > BA + BA ~ B[attr]:hover:active:focus:target:checked:disabled:not()::before::after:has()在CSS规则中，最右边的选择器被称为关键选择器（Key Selector），也就是实际应用样式时直接作用于目标元素的选择器。在浏览器解析CSS规则时，它会从右向左读取选择器，因为这样可以更快地确定规则是否适用于当前元素。因此，关键选择器的性能对整个选择器链的匹配效率有很大影响。
css兄弟选择器+，~
w_____w_____的博客
12-16 208
css兄弟选择器+与~ 相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。 有+和~两种，如(.h1+p和.h1 ~p)。两者区别是+只选择后面的一个p元素。而 ~选择后面所有的p元素。 +： <!DOCTYPE html> <html lang="en"> <head> <met...
css设置兄弟元素样式-兄弟选择器
m0_69439101的博客
04-06 4065
有一种选择器就叫兄弟元素选择器，分为临近兄弟和普通兄弟。临近兄弟（相邻）：用 ＋ 表示，只匹配该元素后边的第一个同级元素。普通兄弟：用 ～ 表示，匹配该元素后边的所有同级元素。
CSS3 新增选择器-子级选择器-兄弟选择器-结构伪类选择器-伪元素选择器-属性选择器
猿码互联
10-14 2490
在上面的例子中，选择器 .list li:nth-child(2) 会选择第 2 个 li 元素，并设置其颜色为红色，而选择器 .list li:nth-child(4) 会选择第 4 个 li 元素，并设置其颜色为红色。在上面的例子中，除了第一个 class 为 "item" 的 div 元素后面的第一个 h3 元素之外，其它的 h3 元素都会被选择。它是通过 ~ 或 + 符号来实现的。需要注意的是，结构伪类选择器通常是基于元素在文档中的位置来进行选择的，因此对于动态生成的元素可能不起作用。
CSS选择器之兄弟选择器（~和+）
Haines
06-29 1万+
今天在改以以前人家写的网页的样式的时候，碰到这个选择器，‘~’，当时我是懵逼的，傻傻分不清 ‘+’ 跟 ‘~’的区别，虽然我知道他们都是兄弟选择器。 　　后来网上查了下，也许是我查找的方式不对，没有找到我想要的答案，于是私下拿这两个选择器来测试了一下。发现原来是这样的。 　　先来代码说话： 　　（1）、‘~’选择器 1 2 3 4 5 6 7 8 9 10 11 12 13 14
css选择器优先级兄弟
08-17
在CSS选择器的优先级排序中，兄弟选择器的优先级相对较低。兄弟选择器是指用于选取与某个元素拥有相同父元素并且位于它后面的所有兄弟元素。兄弟选择器使用"+"符号表示，例如 "div + p"，表示选取紧跟在 div 元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值