Что делает селектора css ~, +,> делать?

Question

Что делают селектора CSS ~, +, и> делать?

Я видел эти селекторы много раз, но неясно, в чем основное отличие между ними. Может ли кто-то объяснить разницу между этими символами? Когда мы будем использовать эти символы?

Answer 1

вы можете прочитать эту статью, которая оказывает полную информацию о селекторе 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> 

в этом примере элемент p, который предшествует div, подсвечивается цветом чтения, в этом примере «Я работаю как 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 получить выделены цветом для чтения, но р элемент, который не ребенок DIV не получает затронуты.

---

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> 

в этом примере р элемент, который непосредственно после ДИВ получить выделены цветом для чтения, в данном примере «Я работаю, как Soft Engg.» этот текст будет выделен.

Answer 2

Компоненты , обсуждаются in the spec.

~ является general sibling combinator. a ~ b выбирает b элементам, которым предшествует (не обязательно сразу) элемент a.

+ является adjacent sibling combinator. a + b выбирает b элементы немедленно, которому предшествует элемент a.

> является child combinator. a > b выбирает b элементов, которые являются немедленных детей из a элемент.