CSS 中'~'(波浪号),','(逗号),'+'(加号)和'>'(大于号)的作用

Posted 2023-04-24

参考技术A 原文： css中“~”（波浪号）、“，”（逗号）、 “ + ”（加号）和 “ > ”（大于号）是什么意思？

选择前面有A元素的所有B标签

为相同父元素中位于A标签后的所有B元素设置样式

两种元素必须拥有相同的父元素，但是B不必直接紧随A出现

是CSS3特有选择器，表示选则A元素的子元素中所有B元素

A B 选择所有后代元素，但是A>B 只选择一代

同时选择A B 两个类，对其应用相同的CSS样式

选择紧接在另一个元素后的元素，二者有相同的父元素

例：增加紧接在h1元素后出现的段落的边距

CSS中的符号波浪号（〜）是啥意思[重复]

【中文标题】CSS中的符号波浪号（〜）是啥意思[重复]

【英文标题】：What does symbol tilde (~) mean in CSS [duplicate]CSS中的符号波浪号（〜）是什么意思[重复]

【发布时间】：2013-03-06 11:14:16

【问题描述】：

我想知道 (~) 在 css 中是什么意思。

#img1:hover ~ #img2 
    opacity: 0;

在 Visual Studio 中，使用此符号时出现“意外字符序列”错误。这在 CSS 中的实际含义是什么。它有什么作用？

【参考方案1】：

http://www.w3.org/TR/selectors/

8.3.2。一般兄弟组合器

一般的兄弟组合子由“波浪号”（U+007E，~）组成 分隔两个简单选择器序列的字符。这 由两个序列表示的元素在 文档树和第一个序列表示的元素 在（不一定立即）由 第二个。

示例

h1 ~ pre

在此处匹配 <pre>：

<h1>Definition of the function a</h1>
<p>Function a(x) has to be applied to all figures in the table.</p>
<pre>function a(x) = 12x/13.5</pre>

还有+选择器，用于相邻的兄弟组合：h1 + pre<pre>标签必须紧跟在<h1>之后

【参考方案2】：

如果它们出现在匹配第一个选择器的元素之后，它会将样式应用于匹配第二个选择器的所有元素。例如，给定一个 HTML sn-p 和 CSS 规则：

hr ~ p 
    font-weight: bold;

<p>Line one</p>
<hr />
<p>Line two</p>
<p>Line three</p>

只有<p>Line two</p> 和<p>Line three</p> 会显示为粗体。在您的示例中，我认为 Visual Studio 在解释 :hover 修饰符时遇到问题，因为它并不是真正的元素。如果将其从规则中删除，它可能会正常工作。

【讨论】：

您是否注意到在各种浏览器中使用 ~ 有任何问题？最新的 Chrome 似乎对我忽略了它。

我构建了一个非常简单的[index.html]，只包含上面的例子。它显示正确，因此我打开了“关于”页面以获取版本号以向您报告。我在 Chrome 70 上，但导航到该页面开始了更新过程。完成后，我重新启动并再次尝试。因此，我可以说它适用于 Chrome 70 和 71。您可能需要确保没有任何东西会覆盖您的样式。