HTML中的点缀--伪类

**伪类的定义:**伪类这个叫法源于它们跟类相似,但实际上并没有类会附加到标记中的标签上。
伪类分为两种(以及新增的伪类选择器):(主讲UI伪类)!

一。UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于链接上),为该元素应用CSS样式。
a.Selector:link :匹配Selector选择器且未被访问前的元素(通常只能是超链接)。
b.Selector:visited :匹配Selector选择器且已被访问前的元素(通常只能是超链接)。
c.Selector:hover :匹配Selector选择器且处于鼠标悬停状态的元素。
d.Selector:active :匹配Selector选择器且处于被用户激活(在鼠标点击与释放之间的状态)的状态的元素。
Selector:focus :匹配Selector选择器且已得到焦点的元素。

e.Selector:enabled :匹配Selector选择器且当前用于处于不可用状态的元素。
f.Selector:disabled:匹配Selector选择器且当前处于不可用状态的元素。
g.Selector:checked :匹配Selector选择器且当前处于选中状态的元素。
h.Selector:default :匹配Selector选择器且页面处于打开时选中状态的元素(即使当前没有被选中亦可)。
i.Selector:read-only :匹配Selector选择器且当前处于只读状态的元素
j.Selector:read-wirte :匹配Selector选择器且当前处于读写状态的元素
k.Selector:selection :匹配Selector选择器的元素中当前被选中的内容。
特别提示:
一个冒号(:)表示伪类,两个冒号(::)表示CSS3新增的伪元素。
上面的Selcotor选择器可以省略,如果省略则可以匹配处于某种状态下的多个元素。

步骤:
① 在body里添加标签里写伪类的样式
② 给出#diva #divothers两个不同的类来作对比
③ 设置input标签样式,当文本框获取焦点时,添加下划线。
HTML中的点缀--伪类_第1张图片

 ④ 链接在初始状态是蓝色的
⑤ 当链接被点击之后,变成(确切的说,到浏览器访问历史中的之歌URL     过期之前或用户删除之前都是灰色)
⑥ 添加标签有点击事件
⑦ 鼠标移动到a标签上的时候,下划线消失

HTML中的点缀--伪类_第2张图片
⑧ 用户在链接上按下鼠标时(活动状态),链接颜色为红色;当input标签获取焦点时,添加下划线
⑨ 没有选择器的情况下,会将所有处于disabled状态下的元素被CSS样式改变HTML中的点缀--伪类_第3张图片
HTML中的点缀--伪类_第4张图片
最终获得图片HTML中的点缀--伪类_第5张图片
第二种(略讲)
2.结构化伪类:会在标记中存在某种结构上的关系(例如:某元素是一组元素中的第一个或最后一个),为该元素应用CSS样式。

  1. 1)Selector:root :匹配文档的根元素。在HTML文档中,根元素永远是元素

    2)Selector:first-child : 表示一组同胞元素中的第一个元素。

    3)Selector:last-child : 表示一组同胞元素中的最后一个元素。

    4)Selector:nth-child(n) : 表示一组同胞元素中的第n个元素。(顺数第n个)

    5)Selector:nth-last-child(n) : 表示一组同胞元素中的倒数第n个元素。(倒数第n个)

    6)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
not和:target(CSS3新增的两个特殊的伪类选择器)
Selector1:not(Selector2) 匹配Selector1,但不匹配Selector2,
相当于从Selector1中减去Selector2
Selector:target (target 目标)说明:如果用户点击一个指向页面中其他元素的链接,
则那个元素就是目标(target)

伪元素:就是在你的文档中若有实无的元素.
伪元素:
::first-letter 伪元素
::first-line 伪元素
::before 和:after 伪元素
《完结》

你可能感兴趣的:(HTML中的点缀--伪类)