200字范文 > css 伪类选择器（链接伪类选择器结构伪类选择器目标伪类选择器）

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

时间：2021-06-21 10:18:53

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><a href="#zheli">它在这里！！</a><a href="#zhebian">躲在这里了！！</a> 我在这里 我在这边. </body></html>

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

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

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。