1. 基本选择器

属性选择器的几种用法

[href] {color: red;}

[type="password"] {color: red;}

[href^="http"] {color: red;}

[href$=".cn"] {color: red;}

[href*="baidu"] {color: red;}

[class~="def"] {color: red;}// 属性值具有多值时，使用如<p class="abc def"></p>

[lang|="en"] {color: red;}// 属性中有'-'时使用，如<p lang="en-us"></p>

示例代码：

<style type="text/css">
    .abc{
        border: 1px solid blue
    }
    .def{
        font-size: large;
    }
    .ddd{
        font-size: small;
    }
    [class~='def']{
        color: red
    }
</style>
<p class="abc def">hello world</p>// 蓝框 大字 红色
<p class="abc ddd">hello world</p>// 蓝框 小字

2. 复合选择器

3. 伪元素选择器

4. 伪类选择器之结构性伪类选择器

ul > li:first-child{ // li且是第一个子元素的li元素
    color:red;
}
ul > li:last-child{// li且是最后一个元素的li元素
    color: blue;
}
span:only-child{// span且在它父元素下是唯一的span元素；建议把父元素写出来
    color: green;
}
span:only-of-type{// span且在它父元素下是唯一类型的span元素；建议把父元素写出来
    color:green;
};

5. 伪类选择器之UI选择器(input标签用)

enabled和disable对input的大部分type都有效，除了checkbox/radio/range三个外。

checked和default不知道怎么用。貌似只在opera上有效。

valid和invalid，是表单校验时使用，自己手动添加valid和invalid属性无用，必须是inp
ut使用pattern和required校验。

6. 伪类选择器之动态伪类

link/visited/hover/active是有顺序的，其他顺序可能无效，这是个坑。

focus用在input获取焦点时使用。

7. 伪类选择器之其他

示例代码：

ul > li:not(:first-child){
    color:red;
}
ul > li:not(:last-child){
    border: 1px solid blue;
}
:empty{display:'none'}