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> 

在這個例子中，在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> 

在這個例子中

所有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元素

「我的工作是軟工程證書」。該文本被突出顯示。

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元素。