jquery选择器

1、选择器 x y和选择器 x>y 的区别。

比如 x y选择的是x的后代元素y ，而x>y选择的是x的直接后代元素（不包括后代的后代）；

例如：

#container ul{
   border:red 1px solid;
}

<div id="container">
    <ul>
        <li> List Item
            <ul>
                <li> Child </li>
            </ul>
        </li>
        <li> List Item </li>
        <li> List Item </li>
        <li> List Item </li>
    </ul>
</div>

效果如下：

如果修改选择器为：

#container>ul{
    border:red 1px solid;
}

效果如下：

2、相邻选择器 x+y（只是选择紧邻x的第一个y元素）：

#container ul+span{
    border:red 1px solid;
}

<div id="container" style="width:300px;">
    <ul>
        <li> List Item
            <ul>
                <li> Child </li>
            </ul>
            <span>
             ul相邻span元素
            </span>
            <span>
             ul相邻span元素的兄弟元素
            </span>
        </li>
        <li> List Item </li>
        <li> List Item </li>
        <li> List Item </li>
    </ul>

    <span>
    我是父ul的相邻元素哦~
    </span>
</div>

效果如下：
3、兄弟选择符x~y(与x+y这个相邻选择符来说，兄弟选择符的范围要广的多，选择的是x后面的任何的y兄弟元素，因为如下图)
    #container ul~span{
        color:lightskyblue;
    }
    span{
        display:inline-block;
    }
<div id="container" style="width:300px;">
    <ul>
        <li> List Item
            <ul>
                <li> Child </li>
            </ul>
            <span>
             ul相邻span元素
            </span>
            <span>
             ul相邻span元素的兄弟元素
            </span>
        </li>
        <li> List Item </li>
        <li> List Item </li>
        <li> List Item </li>
    </ul>

</div>
效果如下：

4、也谈自定义属性的重要性，如果要找到一些图片元素，为图片元素定义相对应的样式，那么一般采用的方法是：
a[href$=".jpg"],
a[href$=".png"],
a[href$=".jpeg"]{
color:red;
}
如果这样写的话，效率低而且会比较麻烦，而另外一种解决方案则是使用自定义属性，如下：
<a href="path/to/image.jpg" data-filetype="image">Image link</a>
a[data-filetype="image"]{
color:red;
}
5、x：before 和x：after伪类元素，这两个伪元素很容易控制选择器周围的内容。常见的x：after使用在对clear：fix进行改进。
例如：
.clearfix:after{
content:"";
display:block;
clear:both;
visibility:hidden;
font-size:0;
height:0;
}
.clearfix{
display:inline-block;
height:1%;
}
这样的改进是对：after伪类元素在元素后面添加一个空间，并且清除它，这个技术使用，特别是在overflow：hidden的时候会显得特别的有用。
6、x：：pseudoElement（使用伪类元素来定义元素的样式）
例如：p：：first-line{
font-weight:bold;
font-size:22px;
}
举个例子：
    p::first-line{
        font-weight: 800;
        color:red;
    }

<div id="container" style="width:300px;">
        <p>
        what makes you happy ,like the bird like sky ,like
        water like fish ,like people like kongqi .
        </p>
        <p>
        what makes you happy ,like the bird like sky ,like
        water like fish ,like people like kongqi .
        </p>
        <p>
        what makes you happy ,like the bird like sky ,like
        water like fish ,like people like kongqi .
        </p>
        <p>
        what makes you happy ,like the bird like sky ,like
        water like fish ,like people like kongqi .
        </p>

</div>
效果截图如下:

像这样的，我们用：：伪元素来定义元素的样式，例如第一行，第一个字符，但是要记住，这样的方法也只能应用在统计元素才有效。
7、用x:nth-child(n)   (选择第几个子元素，用这样的方式，其中子元素的计数不是从0开始计数，如果想选第二个li，则用li:nth-child(2)).
也可以采用x:nth-child(2n),来选择成为2的倍数的元素的选择。
同时，如果选择倒数第几个元素，则可以使用li:nth-last-child(2),这个表达式就可以选择ul下面的倒数第二个li，并对其设置相对应的样式。

8、通过元素的类型来选择元素而不是通过孩子来选择元素。

比如有5个<p>，如果想对第三个p定义样式，但是没有唯一的id或者class来找到它，这个时候就可以使用nth-of-type(3)伪类了，例子：

同理，也可以使用这样的伪类来倒数：nth-last-typeof-child（2），倒数第二个类型为某某的元素。

和此类伪类元素元素相似的元素还有，x：first-child ,x:last-child;

还有，x:only-of-type，这个伪类用来对选择的x元素，在其父节点内没有兄弟节点的元素，比如，我们可以选择只有一个li作为其子孩子的ul元素。ul >li:only-of-type{font-weight:bold;}

参考博客地址：http://www.open-open.com/lib/view/open1429583085104.html；