伪类选择器
作用:选中特殊状态的元素
如何理解 “伪” ——虚假的 不是真的
如何理解 “伪类” ——像类(class)但不是类 是元素的一种特殊状态
常用的伪类选择器:
一.动态伪类:
1. :link [超链接未被访问的状态]
2. :visited [超链接访问过的状态]
3. :hover [鼠标悬停在元素上的状态]
4. :active [元素激活的状态]
什么是激活?--按住鼠标不松
注:遵循 LVHA 的顺序 即:link,visited,hover,active,
5. :focus [获取焦点的元素]
表单类元素才能使用 :focus 伪类
当用户:点击元素,触摸元素,或通过键盘上的 ,TAB,等方式来选择元素时,救是获得焦点
二,结构伪类:
常用的:
1. first-child 所有兄弟元素中的第一个:
2. :last-child 所有兄弟元素中的最后一个:
3. :nat-child 所有兄弟元素中的第n个:
4. :first-of-type 所有 同类型 兄弟元素中的第一个:
5. :last-of-type 所有 同类型 兄弟元素中的最后一个:
6. :nth-of-type(n) 所有 同类型 兄弟元素中的第 n 个
关于 n 的值:
补充元素:
:nth-last-child(n) 所有兄弟元素中的倒数第 n 个:
:nth-last-of-type(n) 选中的是所有 同类型 兄弟元素中的 倒数第 n 个:
:only-child 选中没有兄弟的元素:
:only-of-type 选中没有 同类型 的兄弟元素:
:root 根元素:
:empty 选中的是没有内容的元素(注:空格也算内容):
三,否定伪类:
:not(选择器) 排除满足括号中条件的元素
例:
四,UI伪类:
1. :checked 被选中的复选框或单选按钮
2. :enable 可用的表单元素(没有 disabled 属性)
3. :disabled 不可用的表单元素(有 disabled 属性)
例:
五,目标伪类:
:target 选中锚点指定的元素
例:
成品图:
六,语言伪类:
:lang() 根据指定的语言选择元素(本质是看 lang 属性的值)
例:
成品图:
伪元素选择器:
作用:选中元素中的一些特殊的位置
常用的伪元素:
::first-letter 选中元素中的第一个文字/字母/字符:
::first-line 选中元素中的第一行文字:
::selection 选中被鼠标选中的内容:
::placeholder 选中输入框的提示文字:
::before 在元素最开始的的位置,创建一个子元素(必须用 content 属性来指定内容):
::after 在元素最后的位置,创建一个子元素(必须用 content 属性来指定内容):
具体编码:
成品图: