css选择器

<div id='container'>
    <ul id='ul'>
        <li>
            hello
            <ul>
                <li>hello</li>
                <li>hello</li>
                <li>hello</li>
            </ul>
        </li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
</div>

<a href="#">frfr</a>
<a href="#">frfr</a>
<a href="#">frfr</a>

一、#container ul{
border:1px solid red;
}时,是选择了#container的子子孙孙的ul标签，看下图：

二、#container>ul{
border:1px solid red;
}时，是选择了#container的子标签ul,看下图

再看

三、#container~a{
color: red;
}是选择了所有#container的同级a标签，看下图

四、a[title]{
color:red;
}属性选择器，所有有title属性的a标签的字体为红色，html代码为：

<a href="#" title='hello'>frfr</a>
<a href="#" title='hello'>frfr</a>
<a href="#">frfr</a>

效果为：

五、a[title='hello']{
color:red;
}属性具体值选择器，title='hello'的a标签，html代码为：

<a href="#" title='hello'>frfr</a>
<a href="#" title='hell'>frfr</a>
<a href="#">frfr</a>

效果图为：

六、a[title*='he']{
color:red;
}属性title的值所有含有'he'的a标签，正则表达，html代码为：

<a href="#" title='hello'>frfr</a>
<a href="#" title='hell'>frfr</a>
<a href="#">frfr</a>

效果图为:

七、a[title^='he']{
color:red;
}属性title的值以'he'开头的a标签，html代码为：

<a href="#" title='hello'>frfr</a>
<a href="#" title='hell'>frfr</a>
<a href="#" title='jjhe'>frfr</a>

效果图为：

八、a[title$='he']{
color:red;
}属性title的值以'he'结尾的a标签，html代码为：

<a href="#" title='hello'>frfr</a>
<a href="#" title='hell'>frfr</a>
<a href="#" title='jjhe'>frfr</a>
<a href="#" title='sdddhe'>fwww</a>

效果图为：

九、input[type='checkbox']:checked{
border:1px solid red;
}选中了复选框里面的checked的选择器：，html代码：

<input type='checkbox' checked>hee
<input type='checkbox' checked>ff
<input type='checkbox' >ff

效果是选中了前两个input

十、*:not(a){
color:red;

}页面上除了a标签以外都是color：red,html代码为：

<div id='container'>
    <ul id='ul'>
        <li>
            hello
            <ul>
                <li>hello</li>
                <li>hello</li>
                <li>hello</li>
            </ul>
        </li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
</div>
<input type='checkbox' checked>hee
<input type='checkbox' checked>ff
<input type='checkbox' >ff
<a href="#" title='hello'>frfr</a>
<a href="#" title='hell'>frfr</a>
<a href="#" title='jjhe'>frfr</a>
<a href="#" title='sdddhe'>fwww</a>
<a href="http://baidu.com">a</a>
<a href="b.jpg" data-b='foo'>b</a>
<a href="#" data-c='foo'>c</a>

效果图为：

十一、#p::first-letter{
color:red;
}选中的选择器里面的第一个字母，html代码为：

<p id='p'>hellowolrd</p>

效果图为：

十二、#p::first-line就是选中了第一行啦。

十三、#ul>li:nth-child(2){
color:red;
}#ul下的第二个子元素li，html代码为：

<ul id='ul'>
        <li>
            hello
            <ul>
                <li>hello</li>
                <li>hello</li>
                <li>hello</li>
            </ul>
        </li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>

效果图为：

十四、li:nth-last-child(n)就是从反方向数第n个li元素

十五：

a[title~='he']{
color:red;
}是选择title的值只能是独立的‘he’一个字符串，html代码为：

<a href="#" title='he'>dd</a>
<a href="#" title='he ll'>dd</a>
<a href="#" title='hel'>dd</a>

效果图为：

十六、

a:last-of-type{
color:red;
}最后一个a标签的字体为红色，html代码为：

<a href="#" title='he'>dd</a>
<a href="#" title='he ll'>dd</a>
<a href="#" title='hel'>dd</a>

效果图为：

十七：

a:nth-last-of-type(1){
color:red;
}，选中了从倒数第一个a标签，html代码为：

<a href="#" title='he'>dd</a>
<a href="#" title='he ll'>dd</a>
<a href="#" title='hel'>dd</a>

效果图为：

十八、a:nth-of-type(n)就跟上面是一样的意思了，只是顺数了

还有就是一些，我都测试了不理解的，我就没写上来了

ps:欢迎补充~~~~附上一个链接，更清晰http://www.cnblogs.com/libingql/p/4375354.html