提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

CSS 01 准备 选择器、伪元素

CSS 元素 准备 01 选择器
2023-06-13 09:16:59 时间

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:;

}

相关文章