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:;}
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023 年 01 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读