命令 | 注释 |
---|---|
:first-child | 匹配第一个子元素 |
:last-child | 匹配最后一子元素 |
:nth-child() | 按正序匹配特定子元素 |
:nth-last-child() | 按倒序匹配特定子元素 |
:nth-of-type() | 在同类型中匹配特定子元素 |
:nth-last-of-type() | 按倒序在同类型中匹配特定子元素 |
:first-of-type | 匹配第一个同类型子元素 |
:last-of-type | 匹配最后一个同类型子元素 |
:only-child | 匹配唯一子类型 |
:only-of-type | 匹配同类型的唯一子元素 |
:empty | 匹配空元素 |
本例设计了一个简单的列表栏,使用数字图标代替默认项目符号。在列表框中为每个列表定义相同的背景图像,借助结构伪类选择器。分别匹配每个列表项目,再调整背景图的位置,实现每行仅显示背景图上相应的数字区域,其他区域隐藏于可视区外。
1.下面实例页面中所有段位文本字体大小为 24px ,然后使用:not(.author)排出第一段文本,设置其他段落文本的字体大小为 14px,代码如下:
网页效果如下:
CSS包括以下3个UI状态伪类选择器。
:enabled // 匹配指定范围内所有可用的UI元素
:disabled // 匹配指定范围内所有不可用的UI元素
:checked // 匹配指定范围内所有选择的UI元素
PS: UI 表示用户交互界面,一般是指表单对象,如文本框、复选框、按钮等。
本例设计了一个简单的用户协议交互表单,当用户勾选“勾选”复选框后,页面底部会显示提交协议按钮,允许用户提交协议,否则隐藏显示,防止勿提表单
代码如下:
效果如下:
在样式表中设计如下两个样式,定义复选框未选中状态时隐藏提交按钮,显示提交文本
PS:该选择器是动态选择器,只有当存在URL指向该匹配元素时,样式效果才有效
实例设计:
单击锚点,跳转指定标题位置!
代码如下:
设计网页显示插入图片和锚点
css修饰
知识点:动态伪类是一类样式,只有用户与页面进行交互时有效,
包括一下两种:
-----------------1.锚点伪类,如:link、:visited。
-----------------2.行为伪类,如:hover,:active和focus。
实例设计
本例设计修饰边框,按钮,利用网页背景色字体颜色来烘托立体变化。
代码如下:
出处:在校生有森记录博客
网址:https://mp.csdn.net/mdeditor/102811335
严禁转载!只用于学习交流!