Bobscript

CSS 选择器之 > + ~

CSS 选择器之 > + ~

PS：标题没有乱码 😃

>选择器

div > a

选取父元素是 <div> 元素的每个 <a> 元素

父元素，就是其直接的上层元素

所以

<div>
    <p><a href="#">链接</a></p>
</div>

这样的<a>是不会被选中的。

+选择器

div + p

选择 <div> 元素之后紧跟的每个 <p> 元素

乍一听和上面的一样啊~

其实是这样的：

<div></div>
<p></p>
<p></p>

上面的两个<p>，只有第一个<p>被选中，所以这里的紧跟是指同级的，相当于jQuery里面的$('div').next('p')

~选择器

p ~ ul

选择所有的<p>之后的、同<p>同级的<ul>

<p>The first paragraph.</p>
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

<h2>Another list</h2>
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
<div>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</div>

上面的前两个<ul>会被选中，第三个<ul>不会，相当于jQuery里面的$('p').nextAll('ul')

20150130补充

[attribute~=value]:contains space-sperated value(WORD) [attribute*=value]:contains SUBSTR [attribute|=value]:started with value which is hyphen-seperated [attribute^=value]:started with SUBSTR [attribute$=value]:ended with SUBSTR