“〜”（波浪号/波浪形/旋转）CSS选择器是什么意思？

本文翻译自：What does the “~” (tilde/squiggle/twiddle) CSS selector mean?

Searching for the ~ character isn't easy. 搜索~字符并不容易。 I was looking over some CSS and found this 我查看了一些CSS，发现了这个

.check:checked ~ .content {
}

What does it mean? 这是什么意思？

#1楼

参考：https://stackoom.com/question/jEu6/波浪号-波浪形-旋转-CSS选择器是什么意思

#2楼

General sibling combinator 通用同级组合器

The general sibling combinator selector is very similar to the adjacent sibling combinator selector. 通用的同级组合器选择器与相邻的同级组合器选择器非常相似。 The difference is that the element being selected doesn't need to immediately succeed the first element, but can appear anywhere after it. 不同之处在于，被选择的元素不需要立即在第一个元素之后，而是可以出现在其后的任何位置。

More info 更多信息

#3楼

The ~ selector is in fact the General sibling combinator (renamed to Subsequent-sibling combinator in selectors Level 4 ): ~选择器实际上是通用同级组合器（在选择器级别4中重命名为后续同级组合器）：

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. 通用同级组合器由分隔两个简单选择器序列的“波浪号”（U + 007E，〜）字符组成。 The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one. 这两个序列所表示的元素在文档树中共享相同的父对象，而第一个序列所表示的元素在第二个所表示的元素之前（不一定紧接）。

Consider the following example: 考虑以下示例：

 .a ~ .b { background-color: powderblue; }

 <ul> <li class="b">1st</li> <li class="a">2nd</li> <li>3rd</li> <li class="b">4th</li> <li class="b">5th</li> </ul>

.a ~ .b matches the 4th and 5th list item because they: .a ~ .b与第4个和第5个列表项匹配，因为它们：

Are .b elements 是.b元素
Are siblings of .a 是.a兄弟姐妹
Appear after .a in HTML source order. 按HTML源顺序显示在.a之后。

Likewise, .check:checked ~ .content matches all .content elements that are siblings of .check:checked and appear after it. 同样， .check:checked ~ .content与.check:checked同级项的所有.content元素匹配，并出现在其后。

#4楼

It is General sibling combinator and is explained in @Salaman's answer very well. 它是General sibling combinator并在@Salaman的答案中作了很好的解释。

What I did miss is Adjacent sibling combinator which is + and is closely related to ~ . 我错过的是+且与~密切相关的Adjacent sibling combinator 。

example would be 例子是

.a + .b {background-color: #ff0000;
}<ul><li class="a">1st</li><li class="b">2nd</li><li>3rd</li><li class="b">4th</li><li class="a">5th</li>
</ul>

Matches elements that are .b 匹配.b元素
Are adjacent to .a 与.a相邻
After .a in HTML 在HTML中的.a之后

In example above it will mark 2nd li but not 4th. 在上面的示例中，它将标记为2nd li而不是4th。

  .a + .b { background-color: #ff0000; }

 <ul> <li class="a">1st</li> <li class="b">2nd</li> <li>3rd</li> <li class="b">4th</li> <li class="a">5th</li> </ul>

JSFiddle JSFiddle

#5楼

Good to also check the other combinators in the family and to get back to what is this specific one. 还可以检查该家族中的其他组合器，然后回到这个特定的组合器。

ul li
ul > li
ul + ul
ul ~ ul

Example checklist: 清单示例：

ul li - Looking inside - Selects all the li elements placed (anywhere) inside the ul ; ul li - 寻找内部 -选择所有的li放置（任意位置）的内部元件ul ; Descendant selector 后代选择器
ul > li - Looking inside - Selects only the direct li elements of ul ; ul > li 向内看 - 仅选择ul 的直接 li元素； ie it will only select direct children li of ul ; 即它将只选择ul直子li ； Child Selector or Child combinator selector 子选择器或子组合器选择器
ul + ul - Looking outside - Selects the ul immediately following the ul ; ul + ul 向外看 -在ul立即选择ul ； It is not looking inside, but looking outside for the immediately following element; 它不是在寻找内部，而是在寻找紧随其后的元素。 Adjacent Sibling Selector 相邻兄弟选择器
ul ~ ul - Looking outside - Selects all the ul which follows the ul doesn't matter where it is, but both ul should be having the same parent; ul ~ ul - 向外看 -选择所有ul后面的ul不要紧，它在哪里，但两者ul应具有相同父节点; General Sibling Selector 通用兄弟选择器

The one we are looking at here is General Sibling Selector 我们在这里看到的是通用兄弟选择器

#6楼

Note that in an attribute selector (eg, [attr~=value] ), the tilde 请注意，在属性选择器（例如[attr~=value] ）中，波浪号

Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value . 表示一个属性名称为attr的元素，其值是一个用空格分隔的单词列表，其中之一就是value 。

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors

“〜”（波浪号/波浪形/旋转）CSS选择器是什么意思？相关推荐

html 井号作用,html5 css选择器。井号，句号的区别
一.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:"body"),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的 ...
linux中波浪号代表什么_linux – $HOME和’〜'(波浪号)之间的区别？
我一直认为$ HOME和〜是完全一样的,因此可以可互换使用.今天,当我试图安装pylibmc,一个python 绑定到memcached,在我共享的服务器上使用〜给我错误,但不是 $ HOME.我想 ...
package.json 中的波浪号（~）和插入符号（^）有什么区别？
问题描述: 在我升级到最新的稳定版 node 和 npm 后,我尝试了 npm install moment --save.它使用插入符号 ^ 前缀将条目保存在 package.json 中.以前,它 ...
jquery、css 的选择器(逗号/空格/英文句号/大于号/加号/波浪号)
jQuery.CSS常用选择器符号描述示例说明紧接无符号相当于"并且"关系 input.k-textbox{ ... } 选出input并且包含k-textbox ...
jquery、css 的选择器(逗号/空格/英文句号/大于号/加号/波浪号)备忘
jQuery.CSS常用选择器符号描述示例说明紧接无符号相当于"并且"关系 input.k-textbox{ ... } 选出input并且包含k-textbox ...
css选择器 ~ （波浪号）、+（加号）、＞（大于号）的用法解析和举例
~(波浪号) ~(波浪号):A ~ B表示选择A标签后的所有B标签,但是A和B标签必须有相同的父元素. <style>h3~h5{color: red;} </style>&l ...
css 大于号标签_CSS设计基础选择器篇
点击上方 Java项目学习 ,选择星标公众号重磅资讯.干货,第一时间送达前言:如果将CSS样式应用于特定的网页对象上,需要先找到目标元素.在CSS样式中执行这一任务的部分被称为选择器. 1 标 ...
【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解（转载，笔记用）
css中">"(大于号)."~"(波浪号)." "(空格).","(逗号)."+"(加号)详解 ...
css 样式文件中的特殊符号 - 波浪号(也叫 tilde,squiggle,twiddle)
例子: .check:checked ~ .content {} ~ 选择器实际上是后继同胞组合器(在2017年之前称为一般同胞组合器): 后继同胞组合器由"波浪号"(U+007E ...

“〜”（波浪号/波浪形/旋转）CSS选择器是什么意思？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

“〜”（波浪号/波浪形/旋转）CSS选择器是什么意思？相关推荐

最新文章

热门文章