css选择器 ~ （波浪号）、+（加号）、＞（大于号）的用法

最新推荐文章于 2025-03-17 00:11:34 发布
最新推荐文章于 2025-03-17 00:11:34 发布
阅读量1.7k 收藏 12
点赞数 11
分类专栏： html/css笔记 文章标签： css 前端
软件技术NINI
本文链接：https://blog.csdn.net/2301_78133614/article/details/140664003
版权

在CSS中，~（波浪号）、+（加号）、>（大于号）是三种不同类型的兄弟选择器（sibling selectors），它们用于根据元素之间的相对位置来选择元素。这些选择器允许你根据一个元素的兄弟元素来应用样式，但它们各自有不同的匹配规则。

1. ~（波浪号） - 通用兄弟选择器

  • 语法：A ~ B
  • 描述：选择所有位于A元素之后的同级B元素。注意，~ 选择器会选中A元素之后的所有同级B元素，而不仅仅是紧接在A元素之后的B元素。
  • 示例：h1 ~ p 会选中所有在 <h1> 元素之后的同级 <p> 元素。

2. +（加号） - 相邻兄弟选择器

  • 语法：A + B
  • 描述：选择紧接在A元素之后的同级B元素。这与~
了解本专栏 订阅专栏 解锁全文 超级会员免费看
CSS选择器之“+“
CyberLynxX的博客
09-26 1307
"+“选择器是CSS中常用的选择器之一，用于选择紧接在指定元素之后的兄弟元素。它的基本语法是使用加号（+）将两个元素选择器连接起来。通过合理使用”+"选择器，我们可以更精确地选择和控制网页中的元素样式。希望本文对您理解和使用"+"选择器有所帮助。如有任何疑问，请随时提问。
CSS组合器：“,“逗号，“ “空格，“&#62“大于号，“+“加号，“~“波浪号
weixin_43736435的博客
07-04 337
选择器组 A,B 匹配A或B A,B{ color:red; } 后代选择器 A B 匹配A的后代B A B{ color:red; } 子选择器 A>B 匹配A的一代子节点B A>B{ color:red; } 相邻兄弟选择器 A+B 匹配A的下一个紧邻的兄弟节点B A+B{ color:red; } 通用兄弟选择器 A之后的全部兄弟节点B A~B{ color:red; } ...
CSS波浪选择器
FF_Chen的博客
06-05 471
~（波浪号）概念 ~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。 <style> h3~h5{ color: red; } </style> <body> <div> <h1>我是第1行</h1> <h2>我是第2行</h2> <div>
CSS选择器
最新发布
2301_82023822的博客
03-17 1238
结构伪类选择器根据元素在文档树中的位置或结构关系进行选择。伪元素选择器用于在元素内容前后插入虚拟元素或修饰特定部分。：选择父元素的第 n 个子元素（正向或逆向计数）。：选择同类型元素中的第 n 个（正向或逆向计数）。伪类选择器用于定义元素的特定状态或结构位置。：选择紧接在前一个元素后的第一个兄弟元素。：选择所有嵌套在祖先元素内的后代元素。：选择父元素的第一个或最后一个子元素。：选择前一个元素之后的所有同级元素。：选择作为父元素唯一子元素的元素。：元素获得焦点时（如表单输入）。：选择父元素中唯一类型的元素。
CSS样式表的波浪线（~）选择器
听海边涛声
05-22 434
CSS样式表的波浪线（~）选择器
css选择器 ~ （波浪号）、+（加号）、＞（大于号）的用法解析和举例
热门推荐
树上骑个猴的博客
12-21 1万+
~（波浪号） ~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。 <style> h3~h5{ color: red; } </style> <body> <div> <h1>我是第1行</h1> <h2>我是第2行</h2> <div>
CSS波浪号选择器
qq_38152997的博客
06-03 1435
波浪选择器用来选择所有匹配到的兄弟元素 <ul> <li class="something-important">Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> .something-important { color: red; } .something-important ~ li { fo
十种CSS选择器详解介绍
01-31
### 十种CSS选择器详解介绍 #### 一、通用选择器 - **定义**: 通用选择器使用星号 `*` 来表示，能够匹配HTML文档中的每一个元素。 - **示例**: ```css * { margin: 0; padding: 0; } ``` - **用途**: 常用于...
爬虫数据源元素获取——CSS选择器深入理解与应用
RHeng的博客
08-07 3315
在爬虫开发中，CSS选择器是一种非常重要的工具，它允许开发者以高效且精确的方式定位和提取HTML文档中的元素。本文将详细介绍CSS选择器在爬虫过程中的应用，包括基本选择器、层次选择器、属性选择器、伪类选择器以及伪元素选择器的使用方法和示例。
头歌教学实践平台 Web前端开发基础 CSS-基础选择器
01-20
子元素选择器使用大于号（`>`）连接两个选择器，表示第一个选择器的直接子元素。例如： ```css ul > li { list-style-type: none; } ``` 这将只对`<ul>`下的直接`<li>`子元素移除默认的列表样式。 七、相邻兄弟...
关于css选择器中的 +
lotpyve的博客
10-19 2667
定义：在CSS中“+”符号选择器被称为相邻兄弟选择器，
【译】谨慎使用CSS中的波浪选择器
sinolover的专栏
03-11 333
最近我的一些项目都遇到了一些类似的样式问题。它们都错误地使用了波浪选择器，并造成了很多地方的CSS代码臃肿(CSS Bloat)。大家可能以前也都遇到或者使用过波浪选择器，毕竟它作为CSS选择器已经很长时间了，甚至IE7都支持。波浪选择器用来选择所有匹配到的兄弟元素。 一个例子 <ul> <li class="something-important">Item...
CSS加号（+）选择器
Sumshine12.5
02-14 6112
+选择符手册给他的定义是相邻选择符 E+F 相邻选择符(Adjacent sibling combinator) 选择紧贴在E元素之后F元素。 做一个示例 li{ height:20px; } ul li.itemtwo+li{ //选取li类名为itemtwo的后一个为li元素 background: red; } <ul> <li>1</li&...
CSS选择器，+ ，＞ 和 ~
a1353206432的博客
11-14 2081
大于符号 > 大于符号选择的是当前元素的直接子元素，孙子元素或者更内层的元素不选择 <div class="box"> <p>001</p> <div> <p>002</p> <p>003</p> </div> <p>004</p> </div> .box p{ /** 表示 c
css中的选择器
阿牛的博客
01-30 2345
css选择器是css中非常重要的一部分，包括我们通过css设置标签的样式以及js中对于某个标签样式的动态修改css选择器都是不可或缺的，今天我就来总结一下吧！
CSS 中加号选择器的使用
天外野草技术专栏
08-05 3975
最近在写一些css样式，对加号选择器的理解不太清楚，于是便查阅了一下：如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器(Adjacent sibling selector)。 例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：h1 + p {margin-top:50px;}这个选择器读作：“选择紧接在 h1 元素后出现的 p 元素（需要满足
css-选择器
qq_62779007的博客
03-09 364
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title> <style>/*1元素选择器*/ div{ background-color: red; }/*2.class选择器/类选择器*/ .gfg{ color: red; } ...
CSS 的选择器
梁甜田的博客
03-21 226
CSS 的选择器 1、元素选择器     由元素名称作为选择器，匹配页面中指定元素名称的所有标签 div{ font-size: 24px;color: red;background-color: grey } 2、类选择器     允许被页面中任意一个元素所引用 特殊用法 1、分类选择器的定义方式 ...
深入理解CSS3选择器及其学习笔记代码解析
基础选择器是CSS选择器中最基本的类型，主要包括元素选择器、类选择器、ID选择器和通配符选择器。 - 元素选择器：通过HTML标签名来选择相应的元素。例如，`p`选择所有的段落元素。 - 类选择器：使用点号（`.`）加上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

软件技术NINI

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值