CSS总结1

伪类:伪类这个叫法源于它们跟类相似,但实际上并没有类会附加到标记中的标签上。
伪类分为两种(以及新增的伪类选择器):
UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于链接上),为该元素应用CSS样式。
Selector:link :匹配Selector选择器且未被访问前的元素(通常只能是超链接)。
Selector:visited :匹配Selector选择器且已被访问前的元素(通常只能是超链接)。
Selector:hover :匹配Selector选择器且处于鼠标悬停状态的元素。
Selector:active :匹配Selector选择器且处于被用户激活(在鼠标点击与释放之间的状态)的状态的元素。
Selector:focus :匹配Selector选择器且已得到焦点的元素。
Selector:enabled :匹配Selector选择器且当前用于处于不可用状态的元素。
Selector:disabled:匹配Selector选择器且当前处于不可用状态的元素。
Selector:checked :匹配Selector选择器且当前处于选中状态的元素。
Selector:default :匹配Selector选择器且页面处于打开时选中状态的元素(即使当前没有被选中亦可)。
Selector:read-only :匹配Selector选择器且当前处于只读状态的元素
Selector:read-wirte :匹配Selector选择器且当前处于读写状态的元素
Selector:selection :匹配Selector选择器的元素中当前被选中的内容。
特别提示:1、一个冒号(:)表示伪类,两个冒号(::)表示CSS3新增的伪元素。
2、上面的Selcotor选择器可以省略,如果省略则可以匹配处于某种状态下的多个元素。
例:

可用按钮 不可用按钮

结构化伪类:会在标记中存在某种结构上的关系,为该元素应用CSS样式。
结构化伪类选择器如下:
Selector:root :匹配文档的根元素。在HTML文档中,根元素永远是元素
Selector:first-child : 表示一组同胞元素中的第一个元素。
Selector:last-child : 表示一组同胞元素中的最后一个元素。
Selector:nth-child(n) : 表示一组同胞元素中的第n个元素。(顺数第n个)
Selector:nth-last-child(n) : 表示一组同胞元素中的倒数第n个元素。(倒数第n个)
Selector:only-child : 匹配符合Selctor选择器,而且必须只有一个子节点。
还有其他的几个结构化选择器:和上面的类似
Selector:first-of-type
Selector:last-of-type
Selector:nth-of-type(n)
Selector:nth-last-of-type(n)
Selector:empty

:not和:target
Selector1:not(Selector2) 匹配Selector1,但不匹配Selector2,
相当于从Selector1中减去Selector2
Selector:target (target 目标)说明:如果用户点击一个指向页面中其他元素的链接,
则那个元素就是目标(target)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值