CSS伪类效果

CSS伪类效果鼠标伪类效果伪类效果能给网页增加一些动态效果,并且使得页面更具有活力。原来的做法是使用Javascript来实现这些动态效果,但是现在我们可以用纯粹的CSS代码来实现这些有趣的效果。伪类分为两种(以及新增的伪类选择器):(1).UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于链接上),为该元素应用CSS样式。Selector:link:匹配Selector选择器且未被访问前的元…

大家好,欢迎来到IT知识分享网。

鼠标伪类效果

伪类效果能给网页增加一些动态效果,并且使得页面更具有活力。原来的做法是使用Javascript来实现这些动态效果,但是现在我们可以用纯粹的CSS代码来实现这些有趣的效果。

伪类分为两种(以及新增的伪类选择器):

(1).UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于链接上),为该元素应用CSS样式。

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选择器可以省略,如果省略则可以匹配处于某种状态下的多个元素。

(2)结构化伪类:会在标记中存在某种结构上的关系(例如:某元素是一组元素中的第一个或最后一个),为该元素应用CSS样式。

结构化伪类选择器如下:

Selector:root :匹配文档的根元素。在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

(3):not和:target(CSS3新增的两个特殊的伪类选择器)

Selector1:not(Selector2) 匹配Selector1,但不匹配Selector2,相当于从Selector1中减去Selector2

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

(4)伪元素:就是在你的文档中若有实无的元素.

伪元素:::first-letter
伪元素
::first-line 伪元素 ::before 和:after 伪元素

:鼠标移动到a标签上的时候,下划线消失:

a:hover {

  text-decoration: none;

}

当input标签获取焦点时,添加下划线:

input:focus {

  text-decoration: underline;

  border:3px solid #F00;

}

将段落中的第一行放大到原来的200% 并将字体的样式设置为斜体

p::first-line {

  font-size: 200%;

  font-style: italic;

}

用css 添加手状样式,鼠标移上去变小手图标

a:hover {

  cursor: pointer;

}

cursor其他取值
在这里插入图片描述
本文章属于复习,温故而知新,同时分享出来给与大家参考和理解

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/21588.html

(0)
上一篇 2024-01-17 14:33
下一篇 2024-01-19 14:33

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信