[CSS]伪类选择器
文章目录
一、伪类选择器是什么？
二、第一种伪类
1. :first-child{}
2. :last-child{}
3. :nth-child(n){},(n为具体数字)
1. :nth-child(n){}
2. :nth-child(n){}。
3. :nth-child(2n){}
4. :nth-child(even){}
5. :nth-child(2n+1){}
6. :nth-child(odd){}
三、第二种伪类
1. first-of-type
2. last-of-type{}
3. nth-of-type(n){},(n为具体数字)
1. :nth-of-type(n){}
2. :nth-of-type(n){}。
3. :nth-of-ype(2n){}
4. :nth-of-type(even){}
5. :nth-of-type(2n+1){}
6. :nth-od-type(odd){}
四、第三种伪类
1. :not(){}
总结
一、伪类选择器是什么？
伪类选择器简称“伪类”，伪类是一种不存在的类，伪类用来表示元素的一种状态。
二、第一种伪类
1. :first-child{}
:first-child{},用来选择父元素下的第一个子元素。
注意：:first-child{}是根据父元素下所有子元素进行排序。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* :first-child{}是根据父元素下所有子元素进行排序，元素ul下的第一个子元素是h1标签，设置没有效果 *//* 选择父元素ul下的第一个子元素，设置字体颜色为红色 */li:first-child{color: red;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* :first-child{}是根据父元素下所有子元素进行排序，*//* 元素ul下的h1、h2标签注释掉后，设置有效果 *//* 选择父元素ul下的第一个子元素，设置字体颜色为红色 */li:first-child{color: red;}</style>
</head>
<body><ul><!-- <h1>《早发白帝城》</h1><h2>唐·李白</h2> --><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
2. :last-child{}
:last-child{},用来选择父元素下的最后一个子元素。
注意：:last-child{}是根据父元素下所有子元素进行排序
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* :first-child{}是根据父元素下所有子元素进行排序，*//* 元素ul下的h1、h2标签注释掉后，设置有效果 *//* 选择父元素ul下的第一个子元素，设置字体颜色为红色 */li:first-child{color: red;}/* 选择父元素ul下的最后一个子元素，设置背景色为黄色 */li:last-child{background-color: yellow;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
3. :nth-child(n){},(n为具体数字)
:nth-child(){},用来选择父元素下的第n个子元素。
注意：:nth-child(){}是根据父元素下所有子元素进行排序
1. :nth-child(n){}
:nth-child(n){}，选中父元素第n个子元素，n为一个具体数字。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选中父元素ul下第三行的子元素，设置背景色为黑色，字体颜色为白色 */li:nth-child(3){background-color: black;color: white;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
2. :nth-child(n){}。
:nth-child(n){}，选中父元素下所有子元素，n为字母。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选中父元素ul下的所有子元素，设置背景色为黑色，字体颜色为白色 */li:nth-child(n){background-color: black;color: white;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
3. :nth-child(2n){}
:nth-child(2n){}，选中父元素下偶数行的子元素。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选中父元素ul下偶行的子元素，设置字体颜色为红色 */li:nth-child(2n){color: red;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
4. :nth-child(even){}
:nth-child(even){}，选中父元素下偶数行的子元素
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选中父元素ul下偶行的子元素，设置背景色为黄色 */li:nth-child(even){background-color: yellow;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
5. :nth-child(2n+1){}
:nth-child(2n+1){}，选中父元素下奇数行的子元素。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选中父元素ul下奇数行的子元素，设置背景色为绿色 ,字体颜色白色*/li:nth-child(2n+1){background-color: green;color: white;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
6. :nth-child(odd){}
:nth-child(odd){}，选中父元素下奇数行的子元素。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选中父元素ul下奇数行的子元素，设置背景色为黄色 ,字体颜色红色*/li:nth-child(odd){background-color: yellow;color: red;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下:
三、第二种伪类
1. first-of-type
:first-of-type{},用来选择父元素下的第一个子元素。
注意：:first-of-type{}是根据父元素下所有同类型的子元素进行排序。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选择父元素ul下的第一个子元素，设置字体为红色 */li:first-of-type{color: red;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
2. last-of-type{}
:last-of-type{},用来选择父元素下的最后一个子元素。
注意：:last-of-type{}是根据父元素下所有同类型的子元素进行排序。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选择父元素ul下的最后一个子元素，设置背景色为橙色,字体颜色红色 */li:last-of-type{background-color: orange;color: red;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
3. nth-of-type(n){},(n为具体数字)
:nth-of-type(n){},用来选择父元素下的第n个子元素。
注意：:nth-of-stype(n){}是根据父元素下同类型的子元素进行排序
1. :nth-of-type(n){}
:nth-of-type(n){}，选中父元素第n个子元素，n为一个具体数字。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选择父元素ul下的第二个子元素，设置背景色为蓝色,字体颜色白色*/li:nth-of-type(2){background-color: blue;color:white;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
2. :nth-of-type(n){}。
:nth-of-type(n){}，选中父元素下所有子元素，n为字母。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选择父元素ul下的所有子元素，设置字体颜色绿色*/li:nth-of-type(n){color:green;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
3. :nth-of-ype(2n){}
:nth-of-type(2n){}，选中父元素下偶数行的子元素。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选择父元素ul下的所有偶数行子元素，设置字体大小28px,字体加粗*/li:nth-of-type(2n){font-size: 28px;font-weight: bold;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
4. :nth-of-type(even){}
:nth-of-type(even){}，选中父元素下偶数行的子元素
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选择父元素ul下的所有偶数行子元素，设置字体大小28px,字体加粗 ，字体颜色绿色*/li:nth-of-type(even){font-size: 28px;font-weight: bold;color: green;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
5. :nth-of-type(2n+1){}
:nth-of-type(2n+1){}，选中父元素下奇数行的子元素。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选择父元素ul下的所有奇数行子元素，设置字体大小28px,字体加粗 ，*/li:nth-of-type(2n+1){font-size: 28px;font-weight: bold;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
6. :nth-od-type(odd){}
:nth-of-type(odd){}，选中父元素下奇数行的子元素。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选择父元素ul下的所有奇数行子元素，设置字体大小28px,字体加粗 ，字体颜色为红色*/li:nth-of-type(2n+1){font-size: 28px;font-weight: bold;color: red;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li>千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
四、第三种伪类
1. :not(){}
:not(n){}否定类，将复合的元素去除，n为指定数值。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 去除ul无序列表默认项目符号 */ul,li{margin: 0px;padding: 0px;list-style: none;text-decoration: none;}/* 选择父元素ul下的l1子元素，去除背景色*/li:not(.l1){background-color: aqua;}</style>
</head>
<body><ul><h1>《早发白帝城》</h1><h2>唐·李白</h2><li>朝辞白帝彩云间，</li><li class="l1">千里江陵一日还。</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山。</li></ul>
</body>
</html>运行结果如下：
总结
以上就是今天要讲的内容，本文仅仅简单介绍了伪类选择器的使用，原对您有所帮助，接下来将继续介绍其它选择器
[CSS]伪类选择器相关推荐
- CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
- css伪类选择器，:link、:visited、:focus、:hover、:active、:first-child
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪类选择器 伪类选择器用于表达在某种状态下的元素. 包括:link.:visited.:focus.:hover.:active ...
- CSS 伪类选择器详解：为网页添加交互与美感
介绍 CSS 伪类选择器是一种非常有用的 CSS 选择器,它能够根据元素的状态.位置或其他属性来选择元素并应用样式.伪类选择器的语法为 :pseudo-class,其中 pseudo-class 是一 ...
- CSS伪类选择器nth-child 选择3的倍数个元素写法
CSS伪类选择器nth-child 选择3的倍数个元素写法 web开发中,经常有对列表的3倍数列表项单独设置样式的需求. ul li:nth-child(3n+3) { colo ...
- html引入scss,使用Sass混合宏来声明CSS伪类选择器
CSS3在选择器方面添加伪类选择器这方面的特性,比如:nth-child(n).:nth-of-type(n)这样的选择器,其好处在这里就不多说了.如果你对这方面感兴趣的话,你可以阅读早前整理有关于C ...
- 用CSS伪类选择器做一个爱心
用CSS伪类选择器做一个爱心 这里我们会用到 position:relative:相对定位 position:absolute;绝对定位 border-radius:圆角属性 transform:变换 ...
- 使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...
- css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）
css 伪类选择器(链接伪类选择器.结构伪类选择器.目标伪类选择器) 链接伪类选择器:顾名思义就是用于链接的伪类选择器.a的伪类标签有:a:link.a:visited.a:hover.a:activ ...
- php中的伪类选择器,css伪类选择器介绍
伪类选择器: (推荐学习:css快速入门) 1.link.hover.active.visited a:link(未访问的链接状态),用于定义了常规的链接状态. a:hover(鼠标放在链接上的状态) ...
- css伪类选择器以及form表单
表格标签 <table></table> 将table分为三块 <thead></thead> <tbody></tbod ...
最新文章
- intellij haskell 插件使用分享
- servlet session listener
- scala 时间格式转换（String、Long、Date）
- 2016年 第7届 蓝桥杯 Java B组 省赛解析及总结
- jstorm mysql_zookeeper，kafka，jstorm，memcached，mysql流式数据处理平台部署
- 关于Android studio3.0的坑之butterknife 7.0.1(低版本)
- vue从入门到精通之基础篇（三）生命周期
- STL bitset用法总结
- java 好和不好的形容词 英语怎么说_java必会的英语单词
- java中计算明年今天的日期_计算今天之后的下一个周年日
- 异构计算完全解析-CSDN.NET
- matlab中ndims函数,matlab中的size(),length(),ndims()函数的用法
- 物联网卡云平台如何分析信息数据
- CSS样式切换技巧 - 动态更换网页色彩皮肤
- DBCP数据库连接失效的解决方法(Io 异常：Connection reset)
- 如何直接操作SVN将分支代码合并到主干
- 软件测试周刊（第31期）：所有的伟大 都源于一个勇敢的开始
- 游戏契合度提示音_产品/市场契合度
- 解决小程序图片上传问题
- 【iOS】file not found: .../Build/Products/Debug-iphonesimulator file not found
热门文章
- LOL手游终于可以玩了！
- 传统OA的上云之变，华为云OA上云解决方案体验
- exp导出excel oracle_oracle导出excel
- vc mysql教程视频教程_vc++_vc++教程_vc++视频教程 _课课家
- 神经网络的主要内容特点,神经网络的特点和功能
- 【Linux】Slurm作业调度系统使用
- java微博中评论模块怎么实战_用户操作之点赞、收藏、评论、删除微博功能实现二...
- 安卓动作游戏《亡灵杀手 Undead Slayer》攻略
- jQuery form插件之ajaxForm()和ajaxSubmit()
- 接上篇 jquery.form.js 的 $.ajaxForm()和 $.ajaxSubmit()