CSS 01 准备 选择器、伪元素

CSS3 浏览器支持情况
​ 网址查询：caniuse.com

CSS3的伪类选择器（一）
动态伪类选器
​

a:link{}
a:visited{}
a:hover{}
a:active{}
UI元素状态伪类选择器
​ html部分：

​

// disable 是状态
​ CSS部分：（根据状态确定样式）

​

input :enable{}
input:disable{}
CSS3的伪类选择器（二）
结构伪类选择器
​ html部分：

            <ul>
                <li a href=""></li>
                <li a href=""></li>
                <li a href=""></li>
                <li a href=""></li>
                <li a href=""></li>
                <li a href=""></li>
                <li a href=""></li>

            </ul>

​

​ css部分

        li:fist-child{}    元素的第一个子元素选中
        li:last-child{}     元素的最后一个子元素选中
        li:nth-child(****){}    选中顺序从左往右
            li:nth-child(2n){}  元素的第偶数个子元素选中
            li:nth-child(2n+1){}  元素的第奇数个子元素选中
            li:nth-child(n+5){}  元素从第5个子元素开始选中
            li:nth-child(4n+1){}  元素每4个元素选中

        li:nth-last-child(){}     选中顺序从右往左
        li:nth-of-type(){}     限定是li标签的子元素 从前往后
        li:nth-last-of-type{}    从后往前
        li:fist-of-type{}    限定是第一个li标签子元素
        li:last-of-type{}    限定是最后一个li标签子元素
        li:only-child{}      选择的元素是它父元素只有一个子元素
        li:only-of-type{}    选择的元素是它父元素只有一个子元素，但是限制子元素的标签类型为li
        li:empty{}              选中的li标签父元素是空的

伪元素
html:

css:

.demo::first-letter{} 文本段落首字
.demo::first-line{} 文本段落首行

.demo::before{ //demo之前

content:;     //伪元素的content属性必须要有，不设置也要有，留空

}

.demo::after{ //demo之后

 content:;

}