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

标签: css选择器, css3

仅有一条评论

  1. css选择器总是在看总是在学却总是在忘...没有做移动端之前,说实在的,根本没有动力让人去记这么多

添加新评论