伪类选择器(链接、结构、目标)

伪类选择器目的就是向某些选择器添加特殊效果。
一、链接伪类选择器

:link—未访问的链接。
:visited—已访问的链接。
:hover—鼠标移动到链接上。
:active—选定的链接。

注意：写的时候要按照lvha的顺序。(lv包包非常hao)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>a:link { /* 未访问的链接 */font-size: 16px;color: gray;font-weight: 700;      }a:visited {/* 已访问的链接 */font-size: 16px;color: orangered;font-weight: 700;          }a:hover {/* 鼠标移动到链接上 */font-size: 16px;color: red;font-weight: 700;          }a:active {/* 选定的链接 */font-size: 16px;color: green;font-weight: 700;       }</style>
</head>
<body>
<div> <a href="#"> 秒杀 </a>  <br /><a href="#"> 闪购 </a> <br /><a href="#"> 优惠 </a> <br />
</div>
</body>
</html>

链接伪类选择器效果：

二、结构伪类选择器

:first-child:选取属于其父元素的首个子元素的指定选择器。
:last-child:选取属于其父元素的最后一个子元素的指定选择器。
:nth-child(n)匹配属于其父元素的第N个子元素，无论元素的类型 even偶数、odd奇数、n 从0开始。
:nth-last-child(n):选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>li:first-child {color: pink;}li:last-child {color: purple;}li:nth-child(4) {color: red;}li:nth-child(even) {font-size: 30px;;}li:nth-last-child(even) {color:skyblue;}</style>
</head>
<body><ul><li>第一个孩子</li><li>第二个孩子</li><li>第三个孩子</li><li>第四个孩子</li><li>第五个孩子</li><li>第六个孩子</li><li>第七个孩子</li><li>第八个孩子</li>       </ul>
</body>
</html>

结构伪类选择器效果：

三、目标伪类选择器

:target目标伪类选择器:选择器可用于选取当前活动的目标元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>:target {color: red;font-size: 20px;}</style>
</head>
<body><h3 id="top"></h3><img src="双笙1.jpg" alt="图片加载失败" width="200"><h2>目录</h2><hr /><a href="#experience">1 早年经历 </a> <br /><a href="#show">2 演艺经历</a> <br /><a href="#music">3 音乐作品</a> <br /><a href="#evaluate">4 人物评价</a> <br /><h3 id="experience">早年经历</h3><hr />“双笙”是她小学毕业那年给自己取的圈名。她曾在“双笙”和“霜笙”两个名字之间犹豫很久，最终认定前者那两个字的结构看起来更美。初二时，双笙开始用社交软件直播唱古风音乐，也随着伴奏录过几首中国风的小情诗。母亲希望双笙学播音主持，以后回老家当播音员，为此还把她送到县广电局上了一段时间培训课，但双笙有自己的想法，更希望成为歌手。 <h3 id="show">演艺经历</h3><hr />2015年4月，双笙在一款音乐App上发布了自己翻唱的古风音乐《故梦》，从而获得了一定的关注度；同年，推出个人原创单曲《采茶纪》。2016年4月，为网游《龙之谷》演唱的插曲《查尔德》正式上线；5月13日，发行专辑《笙声不息》；同年，与易言、樊棋、南久合作翻唱歌曲《九九八十一》（Bilibili2016年拜年祭歌曲）。2017年3月，为电视剧《红楼梦》青春版演唱的推广曲《终身误》正式上线；4月，与歌手慕寒合作，为网易网游《新倩女幽魂》六周年资料片“紫禁风云”演唱了倩女串烧歌曲《倩音流年》；同月，发布了一首为漫画《笑傲江湖》原创的东方不败同人歌曲《不立传-东方不败》 [7]  。2018年1月13日，推出原创单曲《少女净妖师》；同月，与GAI合作演唱《都市惊奇夜》。1月25日，为手游《楚留香》演唱的宣传曲《马步谣》正式上线。3月24日，推出个人单曲《司南歌》。8月24日，为电影《阴阳诀之祭情》演唱的主题曲《阴阳诀》正式上线 。12月5日，推出个人原创单曲《谢芳菲》。<h3 id="music">音乐作品</h3><hr />01. 《长安忆》          　 05.    《琴师》    <br />02. 《霜雪千年》      06. 《故梦》    <br />03. 《浮生未歇》      07. 《泸沽寻梦》  <br />04. 《画双》                <br /><h3 id="evaluate">人物评价</h3><hr />双笙对古风音乐优美的旋律和独特的意境情有独钟，她略带沙哑的独特嗓音，具有极高的辨识度，被形容为“又沧桑又稚嫩”。在日本的Niconico上，有人说听了她的歌就想学汉语。（人民网、《齐鲁晚报》评）双笙用独有的古风曲调，独特的声线，以及宛如天籁的嗓音，将生命中的花谢花开，缘起缘灭，生活中的友情，乃至爱情等情感于诗情画意中娓娓道来，尽显古风古韵之纯净唯美 [5]  。（中国新闻网评）双笙在演唱歌曲《阴阳诀》时，将歌曲演唱的情感丰富、回味悠长，歌曲曲调优美中透露着一股悲壮，配合抒情的旋律，极具情绪感染力 。（腾讯娱乐评）<a href="#top">top</a> <br />
</body>
</html>

目标伪类选择器：

四、链接伪类的简写方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>/* 链接选择器 */a {font-weight: 700;font-size: 16px;color: gray;}/* 鼠标经过 */a:hover {color: red;}</style>
</head>
<body><a href="#">秒杀 </a>
</body>
</html>

正常状态：

鼠标经过时：

伪类选择器(链接、结构、目标)相关推荐

css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）
css 伪类选择器(链接伪类选择器.结构伪类选择器.目标伪类选择器) 链接伪类选择器:顾名思义就是用于链接的伪类选择器.a的伪类标签有:a:link.a:visited.a:hover.a:activ ...
《图解CSS3：核心技术与案例实战》——2.4节动态伪类选择器
本节书摘来自华章社区<图解CSS3:核心技术与案例实战>一书中的第2章,第2.4节动态伪类选择器,作者大漠,更多章节内容可以访问云栖社区"华章社区"公众号查看 2.4 ...
CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
伪类选择器的简单介绍
一.伪类选择器介绍伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
css中什么是伪类选择器？伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
css中什么是伪类选择器？伪类选择器的简介
一.伪类选择器介绍伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
CSS定位+装饰+伪类选择器拓展
文章目录 CSS定位定位能解决的解决问题: 定位的使用静态定位相对定位绝对定位绝对定位特点子绝父相子绝父相vs子绝父绝子绝父相案例子绝父相水平居中案例子绝父相水平垂直都居中案例导 ...
css复合选择器（后代选择器、子代选择器、并集选择器、链接伪类选择器、：focus选择器）
什么是复合选择器? 在css中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的. 复合选择器可以更准确.更高效的选择目标元素(标签 ...
html中结构伪类选择器,结构伪类选择器
属性选择器元素的属性,我们都知道是什么.例如下面代码中type和value就是input元素的属性.属性选择器,顾名思义,就是通过属性来选择元素的一种方式. 属性选择器说明 E[attr^=&qu ...

伪类选择器(链接、结构、目标)

伪类选择器(链接、结构、目标)相关推荐

最新文章

热门文章