css伪类_css lang-CSDN博客

本文链接：https://blog.csdn.net/weixin_55178279/article/details/116204228

什么是伪类？

伪类用于定义的特殊状态。

例如：

鼠标悬浮在元素上时获取样式。
已访问和未访问链接设置不同的样式。
设置元素获得焦点时的样式。

锚伪类

链接可以以不同的方式显示：

伪类也可以做到与JS一样的动态效果（伪类和css结合）。

伪类可以和css类一起使用：

当鼠标在元素上时元素样式会发生改变：

例如：p.highl:hover{

color：#cacaca;

font-size:30px;

}

简单的悬停提示

当把鼠标悬停在div元素显示p元素（类似工具提示的效果):

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

:first-child伪类

:first-child 伪类和指定的元素匹配：这个元素是另一个元素的第一个元素。

实例：div p:first-child{

font-size:30px;

}

这是选择器匹配div下面的第一个p标签元素

css中的:lang伪类

:lang伪类允许为不同的语言定义特殊的规则。

UL伪类

伪类：伪类这个叫法源自于它们跟类相似，但实际上并
没有类会附加到标记中的标签上。
伪类分为两种(以及新增的伪类选择器)：
UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，
为该元素应用CSS样式。hover
结构化伪类：会在标记中存在某种结构上的关系时(
例如：某元素是一组元素中的第一个或最后一个)，
为该元素应用CSS样式。
:not和:target(CSS3新增的两个特殊的伪类选择器)

UI元素状态伪类选择器有如下几个：
Selector:link ：匹配Selector选择器且未被访问前的元素(通常只能是超链接)。
Selector:visited ：匹配Selector选择器且已被访问前的元素(通常只能是超链接)。
Selector:hover ：匹配Selector选择器且处于鼠标悬停状态的元素。
Selector:active ：匹配Selector选择器且处于被用户激活(在鼠标点击与释放之间的状态)
的状态的元素。
Selector:focus ：匹配Selector选择器且已得到焦点的元素。
Selector:enabled ：匹配Selector选择器且当前用于处于不可用状态的元素。
Selector:disabled:匹配Selector选择器且当前处于不可用状态的元素。
Selector：checked :匹配Selector选择器且当前处于选中状态的元素。

Selector：default :匹配Selector选择器且页面处于打开时选中状态的元素
(即使当前没有被选中亦可)。
Selector：read-only :匹配Selector选择器且当前处于只读状态的元素
Selector：read-wirte :匹配Selector选择器且当前处于读写状态的元素
Selector：selection :匹配Selector选择器的元素中当前被选中的内容。

特别提示：1、一个冒号(:)表示伪类，两个冒号(::)表示CSS3新增的伪元素。
2、上面的Selcotor选择器可以省略，如果省略则可以匹配处于某种
状态下的多个元素。

结构化伪类

-结构化伪类选择器如下：
   Selector:root :匹配文档的根元素。在HTML文档中，根元素永远是<html>元素
   Selector:first-child : 表示一组同胞元素中的第一个元素。
Selector:last-child : 表示一组同胞元素中的最后一个元素。
Selector:nth-child(n) : 表示一组同胞元素中的第n个元素。(顺数第n个)
Selector:nth-last-child(n) : 表示一组同胞元素中的倒数第n个元素。(倒数第n个)

Selector:only-child : 匹配符合Selctor选择器，而且必须只有一个子节点。
还有其他的几个结构化选择器：和上面的类似
Selector:first-of-type
Selector:last-of-type
Selector:nth-of-type(n)
Selector:nth-last-of-type(n)
    Selector:empty

常用伪类：

:hover 把鼠标放在链接上的状态

:nth-of-type()、:nth-of-child()等结构选择器

:checked、:disabled 等表单相关的伪类。

伪元素：就是在文档中若有实无的元素。

（说明：在HTML中没有，我们可以用CSS的样式设置伪元素，让它显示出来）伪元素：

::first-letter 伪元素第一个字母

::first-line 伪元素第一行

::before 和::after 伪元素

CSS3新增的两个特殊的伪类选择器

Selector1:not(Selector2) 匹配Selector1，但不匹配Selector2，

相当于从Selector1中减去Selector2

Selector:target (target 目标)说明：如果用户点击一个指向页面中其他元素的链接，

则那个元素就是目标(target)

伪类

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述
:active	向被激活的元素添加样式。
:focus	向拥有键盘输入焦点的元素添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:first-child	向元素的第一个子元素添加样式。
:lang	向带有指定 lang 属性的元素添加样式。