CSS 01 准备选择器、伪元素

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

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

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

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

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

代码语言：javascript复制

            <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部分

代码语言：javascript复制

        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之前

代码语言：javascript复制

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

}

.demo::after{ //demo之后

代码语言：javascript复制

 content:;

}

html css

0 人点赞

CSS 01 准备 选择器、伪元素

CSS 01 准备选择器、伪元素