css 样式文件中的特殊符号 - 波浪号(也叫 tilde,squiggle,twiddle)

例子：

.check:checked ~ .content {}

~ 选择器实际上是后继同胞组合器（在2017年之前称为一般同胞组合器）：

后继同胞组合器由“波浪号”（U+007E，~）字符组成，它将两个简单选择器序列分隔开。由这两个序列表示的元素在文档树中具有相同的父级，并且由第一个序列表示的元素位于由第二个序列表示的元素之前（不一定是紧随其后）。

看下面这个例子：

.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 匹配第四和第五个列表项，因为它们：

是 .b 元素
是 .a 的同胞元素
在 HTML 源代码中出现在 .a 的后面。

在 CSS 中，波浪号（~）是一种选择器，用于选择指定元素的同胞元素。波浪号选择器通常用于根据特定关系选择元素，例如选择表单输入后的错误消息。

下面是一个具体的例子，假设我们有以下 HTML 代码：

<ul><li class="item">Item 1</li><li class="item">Item 2</li><li class="item">Item 3</li><li class="item important">Important Item 4</li><li class="item">Item 5</li><li class="item">Item 6</li>
</ul>

我们可以使用波浪号选择器来选择 “Important Item 4” 元素后的所有元素，如下所示：

.important ~ .item {color: red;
}

在这个例子中，波浪号选择器选择了所有同胞元素，并将它们的颜色设置为红色。这里，“.important” 是第一个元素，“~” 表示后面的 “.item” 是 “.important” 的同胞元素，因此所有同级别的 “.item” 都会被选择，并将它们的颜色设置为红色。

另一个常见的用法是选择表单输入后的错误消息，例如：

<label for="name">Name:</label>
<input type="text" id="name" name="name">
<p class="error">Please enter your name</p>

使用以下 CSS 代码可以选择与输入字段相邻的错误消息：

input:focus ~ .error {display: block;
}

在这个例子中，当输入字段获得焦点时，波浪号选择器选择了所有同胞元素，并将 “.error” 元素的显示属性设置为 block。因此，当输入字段获得焦点时，相关的错误消息将被显示出来。

css 样式文件中的特殊符号 - 波浪号(也叫 tilde,squiggle,twiddle)相关推荐

css样式表中的样式覆盖顺序(转)
有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 Css代码 #navigator { height: 100%; width: 200; position: ...
style-loader 与css-loader 处理 css样式文件
webpack对于css样式文件的加载处理,直接处理会报错 ,缺省合适的加载器. 安装加载器在webpack.config.js中进行配置 ps:webpack 判读是否是JS类型的文件.不是JS ...
linux系统css样式加载不出,Linux系统虚拟主机网站访问页面css样式文件加载失败或图片无法显示的分析解决...
问题场景:客户使用Linux系统虚拟主机,网站程序上传之后访问发现页面排版有问题,css样式文件加载失败,部分图片显示不出来,以织梦CMS程序为例,如下图所所示: 问题原因: 1.Linux系统虚拟主 ...
引入外部独立的CSS样式文件
HTML引入CSS样式的第三种方式引入外部独立的CSS样式文件 1.css 文件 a {text-decoration : none; }/*cursor : 鼠标样式,pointer是小手,hand ...
div html表格样式设置字体大小,css样式表中如何修改字体大小为18px？
css样式表中如何修改字体大小为18px?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css样式表中如何修改字体大小为18px? 在css样式表中可以 ...
Css样式表中：margin、paddi…
原文地址:Css样式表中:margin.padding和border 作者:相淋样式表的精髓:margin和padding和border 一.padding 我们可以把加过样式表的HTML标记看成是 ...
paip 系统无法在消息文件中为 Application 找到消息号为 0x2350 的消息文本服务器存储空间不足无
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! paip ...
js改变css样式_React 中使用CSS的7种方法
来源 | https://www.jianshu.com/p/74aa74484579 第一种: 在组件中直接使用style 不需要组件从外部引入css文件,直接在组件中书写. import Reac ...
require.js引入css文件,[DikeJS]RequireJS引入CSS样式文件（五）
在实际开发组件时,我们常常需要关注组件的样式,样式如何定义,以及样式如何引用,我关注此问题时也纠结了一小下,不过还好,RequireJS周边给我们提供了丰富的插件,我们可以直接使用css.js,具体的 ...

css 样式文件中的特殊符号 - 波浪号(也叫 tilde,squiggle,twiddle)

css 样式文件中的特殊符号 - 波浪号(也叫 tilde,squiggle,twiddle)相关推荐

最新文章

热门文章