伪类结构选择器,状态伪类选择器,弹性盒子

本文详细介绍了CSS中的伪类选择器,包括链接伪类(link、visited、hover、active)、结构伪类(first-child、first-of-type等)以及状态伪类(before、after等)。此外,还探讨了如何使用弹性盒子(Flexbox)进行布局,通过设置display-flex、flex-direction、flex-wrap和align-items属性实现灵活的响应式布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

伪类选择器:a标签有4种伪类,建议按顺序书写: link:连接前  visited:连接后

                                                      hover:鼠标移入时 active:鼠标在元素上并按下左键

        first-child: 第一个子级(只能是第一个li,li是第一个子级元素)

        first-of-child:特定的第一个子级(第一个li类型的标签,li不用是第一个子元素)

        last-child:最后一个子级

        last-of-child:特定最后一个子级

        nth-child(n):第n个子元素

        nth-of-type(n):特定的第n个子元素(比较准确)

        nth-last-child(倒数第n个子元素)

        nth-last-of-type(n):(指定类型的倒数第n个子元素)

状态伪类选择器:可以理解为某个元素的子元素,但不存在于html中

         1.::after:元素后面的内容

         2.::before:元素前面的内容

         3.::first-line:文本的第一行样式

         4.::first-letter:文本的首字母,只用于块元素

         5.::placeholder:只用于表单的提示信息

弹性盒子:实现弹性布局:父元素设置display-flex

                  flex-direction:确定主轴方向:row(默认) 起点在左端

                                                                 row-reverse 起点在右端

                                                                 column:竖直方向 起点在上边

                                                                 column-reverse:竖直方向 起点在下边

                 flex-wrap:设置元素是否换行  默认不换行

                 align-items:交叉轴对齐方式:flex-start 起点对齐

                                                               flex-end 终点对齐

                                                               center  居中

                                                               baseline 文本下基准线

                 调整换行的排列方式:alidn-content:flex-start

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值