伪类选择器

伪类选择器

作用：选中特殊状态的元素

如何理解 “伪” ——虚假的 不是真的

如何理解 “伪类” ——像类（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 属性来指定内容）：

具体编码：

成品图：