CSS伪类与伪元素选择器

伪类选择器

动态伪类

• :link 超链接未被访问的状态。
• :visited 超链接访问过的状态。
• :hover 鼠标悬停在元素上的状态。
• :active 元素激活的状态。
  **注意：link、visited、hover、active顺序不可变 **
• :focus 获取焦点的元素
  注意：表单元素才能使用:focus伪类

结构伪类

• 常用的：
  1. :first-child 所有兄弟元素中的第一个。
  2. :last-child 所有兄弟元素中的最后一个。
  3. :nth-child(n) 所有兄弟中的第n个。
  4. :first-of-type 所有同类型兄弟元素中的第一个。
  5. :last-of-type 所有同类型兄弟元素中的最后一个。
  6. :nth-of-type(n) 所有同类型兄弟元素中的第n个。
     关于n的值：

	1. 0 或 不写：什么都选不中 ---几乎不用
	2. n：选中所有子元素 --- 几乎不用
	3. 1~正无穷的整数：选中对应序号的子元素
	4. 2n 或 even：选中序号为偶数的子元素
	5. 2n+1 或 add：选中序号为基数的子元素
	6. -n+3：选中的是前3个

否定伪类

:not(选择器) 排除满足括号中条件的元素。

UI伪类

1. :checked 被选中的复选框或单选按钮。
2. :enable 可用的表单元素（没用 disabled 属性）
3. disabled 不可用的表单元素（有 disabled 属性）

目标伪类

:target 选中锚点指向的元素。

语言伪类

:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）

伪元素选择器

• 作用：选中元素中的一些特殊位置。
• 常用伪元素：
  • ::first-letter 选中元素中的第一个文字。
  • ::first-line 选中元素中的第一行文字。
  • ::selection 选中被鼠标选中的内容。
  • ::placeholder 选中输入框的提示文字。
  • ::before 在元素中最开始的位置，创建一个子元素（必须用 center 属性指定内容）
  • ::after 在元素中最后的位置，创建一个子元素（必须用 center 属性指定内容）
    例：

		/* 选中的是div中的第一个文字 */
        div::first-letter {
            color: red;
            font-size: 40px;
        }
        /* 选中的是div中的第一行文字 */
        div::first-line {
            background-color: yellow;
        }
        /* 选中的是div中被鼠标选择的文字 */
        div::selection {
            background-color: green;
            color: orange;
        }
        /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color: skyblue;
        }
        /* 选中的是p元素最开始的位置，随后创建一个子元素 */
        p::before {
            content: "￥";
            color: red;
        }
        /* 选中的是p元素最后的位置，随后创建一个子元素 */
        p::after {
            content: ".00";
        }