Question

CSS选择器〜，+和＆gt;是什么？做？

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

Answer 1

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

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

+是adjacent sibling combinator。 a + b选择b元素立即，后面加a元素。

>是child combinator。 a > b选择<{1}}元素直接子项的b个元素。

Answer 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元素以读取颜色突出显示，在此示例中“我正在以软工程方式工作”。和“我的演示页面。”文字突出显示。

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之后立即以读取颜色突出显示，在本例中“我正在以软英语工作”。这个文字突出显示。

css选择器是什么〜，+，＆gt;做？

2 个答案: