一、元素的伪类？

本文将介绍元素的伪类使用方法，其中:link、:visited只适用于超链接a标签。:hover和:active适用于所有元素，可以设置任何样式。

二、使用方法

默认代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素的伪类</title>
</head>
<body><a href=""https://www.jd.com/">京东</a><h1>《登高》</h1><h2>杜甫·唐</h2><div><p>风急天高猿啸哀，渚清沙白鸟飞会。</p><p>无边落木萧萧下，不尽长江滚滚来。</p><p>万里悲秋常作客，白鸟多病独登台。</p><p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p></div>
</body>
</html>

默认运行结果如下：

1. :visited

:link 表示超链接a标签未被访问前的状态。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素的伪类</title><style>/* 设置div样式 */div{width: 300px;height: 150px;border: 2px solid aqua;}/* 设置超链接a标签未被访问前的状态，设置超链接a标签颜色为红色 */a:visited{color: red;}</style>
</head>
<body><a href="https://www.jd.com/">京东</a><h1>《登高》</h1><h2>杜甫·唐</h2><div><p>风急天高猿啸哀，渚清沙白鸟飞会。</p><p>无边落木萧萧下，不尽长江滚滚来。</p><p>万里悲秋常作客，白鸟多病独登台。</p><p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p></div>
</body>
</html>

运行结果如下：

2. :link

:link 表示超链接a标签被访问后的状态。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素的伪类</title><style>/* 设置div样式 */div{width: 300px;height: 150px;border: 2px solid aqua;}/* 设置超链接未被访问的状态，设置超链接a标签颜色为绿色 */a:link{color: green;}/* 设置超链接a标签未被访问前的状态，设置超链接a标签颜色为红色*/a:visited{color: red;}</style>
</head>
<body><a href="https://www.jd.com/">京东</a><h1>《登高》</h1><h2>杜甫·唐</h2><div><p>风急天高猿啸哀，渚清沙白鸟飞会。</p><p>无边落木萧萧下，不尽长江滚滚来。</p><p>万里悲秋常作客，白鸟多病独登台。</p><p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p></div>
</body>
</html>

运行结果如下：

3. :hover

:hover 表示鼠标移入后的状态

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素的伪类</title><style>/* 设置div样式 */div{width: 300px;height: 150px;border: 2px solid aqua;}/* 设置超链接未被访问的状态，设置超链接a标签颜色为绿色 */a:link{color: green;}/* 设置超链接a标签未被访问前的状态，设置超链接a标签颜色为红色*/a:visited{color: red;}/* 设置鼠标移入div标签后背景色橙色 */div:hover{background-color: orange;}</style>
</head>
<body><a href="https://www.jd.com/">京东</a><h1>《登高》</h1><h2>杜甫·唐</h2><div><p>风急天高猿啸哀，渚清沙白鸟飞会。</p><p>无边落木萧萧下，不尽长江滚滚来。</p><p>万里悲秋常作客，白鸟多病独登台。</p><p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p></div>
</body>
</html>

运行结果如下：

4. :active

:hover 表示鼠标移点击后的状态

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素的伪类</title><style>/* 设置div样式 */div{width: 300px;height: 150px;border: 2px solid aqua;}/* 设置超链接未被访问的状态，设置超链接a标签颜色为绿色 */a:link{color: green;}/* 设置超链接a标签未被访问前的状态，设置超链接a标签颜色为红色*/a:visited{color: red;}/* 设置鼠标移入div标签后背景色橙色 */div:hover{background-color: orange;}/* 设置鼠标点击div标签后，div标签里的p标签背景色为粉色 */div:active>p{background-color: pink;}</style>
</head>
<body><a href="https://www.jd.com/">京东</a><h1>《登高》</h1><h2>杜甫·唐</h2><div><p>风急天高猿啸哀，渚清沙白鸟飞会。</p><p>无边落木萧萧下，不尽长江滚滚来。</p><p>万里悲秋常作客，白鸟多病独登台。</p><p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p></div>
</body>
</html>

运行结果如下：

总结

以上就是今天要讲的内容，本文仅仅简单介绍了元素的伪类的使用方法，是学习CSS必不可少的内容，下面将继续介绍其它选择器的使用方法。

【CSS】元素的伪类相关推荐

CSS基础(part3)--伪类及伪元素
学习笔记,仅供参考,有错必纠参考自:CSS中文文档文章目录 CSS 伪类伪元素 `:first-line` `:first-letter` `:first-child` `:before` 和` ...
HTML与CSS基础之子元素的伪类(七)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>子元素 ...
css横向排列_CSS中伪元素和伪类的经典使用技巧
随着前端技术的发展,CSS样式的制作在网页中占据着十分重要的地位.前台页面的样式布局.以及展现给用户的体验效果都离不开CSS;虽然在实际的开发中会大量的使用一些主流的UI样式框架,但这些样式框架每一个 ...
CSS伪类(Pseudo-classes)、伪元素、伪类选择器
CSS伪类(Pseudo-classes)和伪元素(详细) 那什么是伪类? 伪类是添加到选择器上的关键字,指定元素的特殊状态,伪类可以根据内容的状态来应用不同的样式: 伪类选择元素基于的是当前元素处于 ...
CSS中的伪类和伪元素（详细）
这篇想要跟大家分享的是css中的伪类和伪元素,有任何问题可以私聊我或者评论哦! 首先,我们先来想一下一.引入伪类跟伪元素的原因? 伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述比如CSS ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
CSS :before :after 伪类选择器
CSS :before :after 伪类选择器所有主流浏览器都支持 :after 选择器. 注释:对于 IE8 及更早版本中的 :after,必须声明 <!DOCTYPE>. :bef ...
[css] 举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同？
[css] 举例说明伪类:nth-child.:first-child与:first-of-type这三者有什么不同? <div> <p>大儿子</p> <d ...
[css] 举例说明伪类:focus-within的用法
[css] 举例说明伪类:focus-within的用法类似于事件的冒泡机制,可以从获取焦点的元素一职冒泡到根元素上个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷. ...

【CSS】元素的伪类

文章目录

一、元素的伪类？

二、使用方法

1. :visited

2. :link

3. :hover

4. :active

总结

【CSS】元素的伪类相关推荐

最新文章

热门文章