css 选择器 ~、+、> 有啥作用？ [复制]

Posted 2023-03-06

【中文标题】css 选择器 ~、+、> 有啥作用？ [复制]

【英文标题】：What does the css selectors ~, +, > do? [duplicate]css 选择器 ~、+、> 有什么作用？ [复制]

【发布时间】：2015-03-11 00:37:59

【问题描述】：

CSS 选择器 ~、+ 和 > 有什么作用？

我多次看到这些选择器，但不清楚它们之间的主要区别是什么。有人可以解释这些符号之间的区别吗？我们什么时候应该使用这些符号？

【问题讨论】：

What does the "+" (plus sign) CSS selector mean?, CSS '>' selector; what is it?的可能重复

【参考方案1】：

那些被称为组合器，讨论in the spec。

~ 是general sibling combinator。 a ~ b 选择 b 前面（不一定立即）有 a 元素的元素。

+ 是adjacent sibling combinator。 a + b 选择前面有 a 元素的b 元素立即。

> 是child combinator。 a > b 选择b 元素，它们是a 元素的直接子元素。

【参考方案2】：

您可以阅读这篇文章，其中包含有关您正在搜索的 css3 选择器的完整信息：http://www.codeproject.com/Articles/703826/CSS-Selector

文章还有演示链接，您可以在其中查看此选择器在做什么

htmlElement ~ HtmlElemnt - Select all the html element which are precedes html element.
CSS

div ~ p

  font:15px arial,sans-serif;
  color:red;

Use

<div >
<p>My name is Pranay Rana.</p>
    <span>
        <p> data </p>
  </span> 
</div>
<p>I am working as Soft Engg.</p>
<p>My Demo Page.</p>

在此示例中，位于 div 之前的 p 元素以读取颜色突出显示，在此示例中为“我正在作为 Soft Engg 工作”。和“我的演示页面”。文本被突出显示。

---

HtmlElement > HtmlElemnt - Select all the html element which are child of html element. 
CSS

div > p

  font:15px arial,sans-serif;
  color:red;

Use

<div >
<p>My name is Pranay Rana.</p>
<Span>
 <p> data </p>
</Span>
</div>
<p>I am working as Soft Engg.</p>

在这个例子中，所有作为 div 子元素的 p 元素都会以读取颜色突出显示，但不是 div 子元素的 p 元素不会受到影响。

---

HtmlElement + HtmlElemnt - Select all the html element which are immediate after html element. 
CSS

div + p

  font:15px arial,sans-serif;
  color:red;

Use

<div >
<p>My name is Pranay Rana.</p>
</div>
<p>I am working as Soft Engg.</p>
<p> data </p>

在此示例中，p 元素紧接在 div 之后以读取颜色突出显示，在此示例中为“我正在作为 Soft Engg 工作”。此文本会突出显示。