css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）

链接伪类选择器：顾名思义就是用于链接的伪类选择器。a的伪类标签有:a:link、a:visited、a:hover、a:active，a:link表示的是未访问的链接，a:visited表示已访问的链接，a:hover表示鼠标移动到链接上，a:active表示的是选定的链接（当我们点击别松开鼠标，显示的状态）
现在来演示一下，代码如下:

<!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: orange;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>   <a href="#" >办案的刑警正在仔细地收集者证据。</a>   </div></body>
</html>

效果如下：

过多的效果的效果不演示了，在html上已经详细的讲过了，可以去翻一翻之前的文章。
结构伪类选择器：根据文档结构来选择。
li:first-child：第一个li。
li:last-child：最后一个li。
li:nth-child(n):n代表的就是第几个li，n=4的话就是第四个li。
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>li:first-child {color: pink; }li:last-child {   color: purple;}li:nth-child(2) {   color: skyblue;font-size: 12px;}li:nth-child(3) { color: green;font-size: 12px;}</style></head><body><ul><li>静夜思</li><li>李白</li><li>唐</li><li>床前明月光，</li><li>疑是地上霜。</li><li>举头望明月，</li><li>低头思故乡。</li></ul></body>
</html>

效果如下：

li:nth-child(odd)：排在奇数的li。
li:nth-child(even)：排在怕偶数的li。
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>li:nth-child(odd) {  color: pink;}li:nth-child(even) {  color: deeppink;}</style></head><body><ul><li>望庐山瀑布</li><li>【作者】李白</li><li>【朝代】唐</li><li>日照香炉生紫烟</li><li>遥看瀑布挂前川。</li><li>飞流直下三千尺,</li><li>疑是银河落九天。</li></ul></body>
</html>

效果如下：

li:nth-child(2n/3n/4n)：2n是指第0、2、4、6、8等个li。3n是指第0、3、6、9、12等个li。4n是指第0、4、8、12、16等个li。
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>li:nth-child(3n) {  color: pink;}</style></head><body><ul><li>赠汪伦</li><li>【作者】李白</li><li>【朝代】唐</li><li>李白乘舟将欲行,</li><li>忽闻岸上踏歌声。</li><li>桃花潭水深千尺,</li><li>不及汪伦送我情。</li></ul></body>
</html>

效果如下：

li:nth-child(even/odd/3n/n):从第一个li开始数的。
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>li:nth-child(even) { color: pink;}</style></head><body><ul><li>白雪歌送武判官归京</li><li>【作者】岑参</li><li>【朝代】唐</li><li>北风卷地白草折，胡天八月即飞雪。</li><li>忽如一夜春风来，千树万树梨花开。</li><li>散入珠帘湿罗幕，狐裘不暖锦衾薄。</li><li>将军角弓不得控，都护铁衣冷难着。</li><li>瀚海阑干百丈冰，愁云惨淡万里凝。</li><li>中军置酒饮归客，胡琴琵琶与羌笛。</li><li>纷纷暮雪下辕门，风掣红旗冻不翻。</li><li>轮台东门送君去，去时雪满天山路。</li><li>山回路转不见君，雪上空留马行处。</li></ul></body>
</html>

效果如下：

li:nth-last-child(even/odd/3n/n):从最后一个开始数。
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style>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><li>中军置酒饮归客，胡琴琵琶与羌笛。</li><li>纷纷暮雪下辕门，风掣红旗冻不翻。</li><li>轮台东门送君去，去时雪满天山路。</li><li>山回路转不见君，雪上空留马行处。</li></ul></body>
</html>

效果如下：
目标伪类选择器：:target：选择该文档中特定“id”的元素。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><style>:target{border: 2px solid #d56d3d;height: 50px;font-size: 20px;text-align: center;line-height: 50px;background-color: #00a4ff;color: purple;}</style>
</head>
<body>
<h1>找一找我在哪里？</h1>
<p><a href="#zheli">它在这里！！</a></p>
<p><a href="#zhebian">躲在这里了！！</a></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="zheli"><b>我在这里</b></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="zhebian"><b>我在这边.</b></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>

首先打开的页面是这样的：

当我们点击第一链接的时候，就变成：
当我们点击第二链接的时候，就变成：

css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）相关推荐

复合选择器-链接伪类选择器（HTML、CSS）
复合选择器-链接伪类选择器(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta c ...
【温故知新】CSS学习笔记（链接伪类选择器）
链接伪类选择器伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果. 之前我们学过类选择器,以点"."开头,为了区分开来,伪类选择器则是以冒号":" ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
伪类选择器(链接、结构、目标)
伪类选择器目的就是向某些选择器添加特殊效果. 一.链接伪类选择器 :link-未访问的链接. :visited-已访问的链接. :hover-鼠标移动到链接上. :active-选定的链接. 注意:写 ...
html5新增的伪类选择器有,CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）...
在css3提供的新选择器之前,选择一个元素需要借助id或者class,css3新增的选择器可以更灵活的去选择需要的元素,那css3提供了哪些好用的选择器呢? 首先就是属性选择器,我们可以通过属性选择器 ...
目标伪类选择器元素状态伪类
目标伪类选择器: 举例说明一下他的用途,比如点击一个文字或是图标实现跳到顶部,这时候可以用的这个目标伪类选择器用于匹配当前激活的[锚点元素] 语法: 目标选择器 :target{} new docu ...
《C Primer Plus》读书笔记——存储类、链接和内存管理
背景距离上次写读书笔记的日子已有半个月了.这段时间一直在做摄像头直立平衡车,也把<C Primer Plus>的中级部分扫了一遍.现在做赛道算法识别遇到瓶颈了,就想把读书笔记补回来.原计 ...
C语言再学习 -- 存储类、链接
这一章是我看的时间最长的一章了,表面上是有很多关键字和几个函数需要学习,其实我知道是自己最近不在状态了,做项目没进展,看书看不下去,两头都放不下,最后两头都没有做好.不由的想起一句话,你不快乐是因为: ...
IT学子成长指导类文章链接（十二）
链接:IT学子成长指导类文章链接(一)(二) (三) (四) (五)(六)(七)(八)(九)(十)(十一) "IT学子成长指导"类我收藏过的好文(十二期:至2014年6月17日) ...

css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）

css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）

css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）相关推荐

最新文章

热门文章