CSS中伪类选择器

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

如何理解"伪"?--虚假的,不真实的

如何理解"伪类"?--像类(class),但是不是类,是元素的一种特殊的状态.

一.动态伪类选择器

:link 超链接未被访问的状态;
:visited 超链接访问过的状态;
:hover 鼠标悬停在元素上的状态;
:active 元素激活的状态.

什么是激活状态?

按下鼠标不松开.

注意点:

以上的顺序是不能变动的,否则将会失效部分功能.

:focus 获取焦点的元素.

表单元素才能使用:focus伪类;

当用户点击元素,触摸元素,或通过键盘的"tab"键等方式,选择元素时,就是获取焦点.

html 复制代码

 <style>
    /* 选中的是没有访问过的a元素 */
      a:link
      {
        color: orange;
      }
    /* 选中的是访问过的a元素 */
      a:visited
      {
        color: gray;
      }
    /* 鼠标悬浮在链接上面 */
      a:hover
      {
        color: skyblue;
      }
    /* 选中的是激活状a元素 */
    a:active
    {
        color: green;
    }

    /* 获取焦点 */
    input:focus
    {
        color: orange;
        background-color: green;
    }
 
 </style>

<body>

<a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
<br>
<input type="text">
</body>

二.常用伪类:

:first-child 所有兄弟元素中的第一个.
:last-child 所有兄弟元素中的最后一个.
:nth-child() 所有兄弟元素中的第N个.
:first-of-type 所有同类型兄弟元素中的第一个.
:last-of-type 所有同类型兄弟元素中的最后一个.
:nth-of-type() 所有同类型兄弟元素中的第N个.

三.否定伪类

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

四.UI伪类

:checked 被选中的复选框或单选按钮.
:enable 可用的表单元素(没有disabled属性).
:disabled 不可用的表单元素(有disabled属性).

五.目标伪类(了解)

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

六.语言伪类(了解)

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

七.伪元素选择器

1.作用:就是元素中的一些特殊位置.

2.常用伪元素:

2.1 ::first-letter 选中元素中的第一个文字.

2.2 ::first-line 选中元素中的第一行文字.

2.3 ::selection 选中被鼠标选中的内容.

2.4 ::placeholder 选中输入框的提示文字.

2.5 ::before 在元素最开始的位置,创建一个子元素(必须用content属性指定内容.)

2.6 ::after 在元素最后的位置,创建一个子元素(必须用content属性指定内容.)