CSS-常见的伪类选择器的用法详解

最新推荐文章于 2022-09-07 20:10:02 发布
最新推荐文章于 2022-09-07 20:10:02 发布
阅读量597 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44486539/article/details/101861963
版权
本文详细介绍了CSS中的四个常见伪类选择器：`:first-child`、`:last-child`、`:first-of-type`和`:last-of-type`的工作原理及使用示例，帮助理解它们在选取元素时的差异。
摘要由CSDN通过智能技术生成
:first-child

:first-child 相对于父级元素做参考，选择所有子元素中的第一个子元素，第一个子元素必须是规定的元素类型，如果不是则不会被选择

示例：

<dl>
	<dt>我的颜色</dt>
	<dd>颜色</dd>
	<dd>颜色</dd>
最低0.47元/天 解锁文章
蓬莱老仙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS：伪类选择器
weixin_54197911的博客
05-03 1945
1.first-child:选择父类元素下第一个子元素。 代码如下（第一种情况p:first-child） <body> <div class="out"> <ul class="list"> <p>hello</p> <p>word</p> <li> <div class=
css类选择器的使用方法详解
10-26
类选择器的使用方法很直接，例如，如果有一个类名叫做"important"，那么CSS中相应的类选择器写法就是“.important”。要应用这个类选择器定义的样式，只需在相应的HTML元素中添加这个类名作为其class属性的值。比如...
伪类选择器以及使用
m0_47531829的博客
05-21 847
<!-- 伪元素选择器：伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签， 从而简化HTML结构 1.1 before和after创建的一个元素，属于行内元素，给其加宽度和高度属性时，不起作用，需要转换成块级元素或者行内块级元素； 1.2 新创建的这个元素在文档树中找不到的，所以称为伪元素 1.3 before和after必须有content属性 1.4 伪元素选择器和标签选择器权重一样，为1 --> <!-- 案例：伪元素配合字体图标的使用 -...
CSS 伪类选择器：如何使用 CSS3 伪类
whereismatrix的专栏
12-20 4011
CSS 伪类选择器：如何使用 CSS3 伪类 CSS3 是个好东西，但也很容易被她的变形（transform）和动画（其中许多特性因浏览器厂商而异）特性所迷惑，因而忘了那些已经被添加到标准规范中的最为基本的选择器。许多强大的新伪类选择器（最新的 W3C 规范中列出了 16 条）使得我们能够在新的标准范围内使用元素选择器。 在探讨这些新的 CSS3 伪类之前，先简要回顾追溯一下这
css伪类选择器用法
最新发布
weixin_71341796的博客
09-07 539
css 伪类选择器用法
伪类选择器
a9874561328的博客
10-13 2622
伪类选择器用来描述一个元素的特殊状态例如第一个元素、被点击的元素、含有指定属性值的选择器，通常用：开头前边有其他选择器 （1）、结构伪类选择器 1、根据所有子元素进行排序 ：first-child 第一个元素 ：last-child 最后一个元素 ：nth-child 选中第n个元素 特殊值：2n/even偶数位元素 2n+1/2n-1/odd奇数位元素 n是一个大于0的整数 ：nth-last-child 倒着数第n个元素 ...
CSS - 常用的伪类选择器简单介绍与基本使用
都随它大小便吧
02-28 6770
CSS 伪类选择器用于选择元素的特定状态或位置，以便对其应用样式。以下是一些常见的伪类选择器及其作用。
详解CSS3选择器的使用方法汇总
09-24
了解并掌握CSS3选择器的使用方法对于进行前端开发和网页美化有着非常重要的作用。各种选择器提供了精确的定位和丰富的样式应用能力，使得设计师可以更加灵活地控制页面布局和外观。通过使用这些选择器，开发者能够...
详解css常用选择器
09-27
在本文中，我们将深入探讨一些常见的CSS选择器及其用法。 1. **元素选择器**：通过元素名称来选择元素，如`table {background:red;}`将所有表格的背景颜色设为红色。 2. **属性选择器**： - `div[id]` 选择所有...
CSS: hover选择器的使用详解
12-13
之前在学计算机应用的时候，老师教我们使用了:hover选择器来完成下拉菜单，之前只知道怎么使用，并不知道为什么要这么用，现在记下怎么使用吧 定义和用法 定义： :hover 选择器用于选择鼠标指针浮动在上面的元素。 :...
CSS选择器：伪类
wennianzhu的博客
02-23 351
伪类 同一个标签，根据其不同的状态，展现不同的样式。 有静态伪类和动态伪类之分 （1）静态伪类：只能用于超链接的样式 :link 超链接被点击之前 :visited 超链接被访问过之后 注：以上两种形式，只能用于超链接 （2）动态伪类：针对所有标签都适用 :hover “悬停”：鼠标放置于标签上时 :active “激活”：鼠标点击标签，但不松手时 :focus 获得焦点时 :first-child伪类 :first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素
CSS——选择器——伪类
GistTAT的博客
02-04 369
a:link {color:#red}     未访问的链接。  链接伪类，只能应用于锚元素      a:visited {color: #yellow}         已访问的链接。   链接伪类，只能应用于锚元素      a:hover {color: #green}     鼠标移动到链接上。   动态伪类，理论上可以用于任何元素，兼容到IE6。可用于设置链接按钮特效。  
css伪类选择器
m0_62200674的博客
07-16 3011
链接伪类选择器、结构伪类选择器、目标伪类选择器
CSS伪类选择器
松一160
03-24 5690
一、链接伪类选择器 :link /* 未访问的链接 */ :visited /* 已访问的链接 */ :hover /* 鼠标移动到链接上 */ :active /* 选定的链接 */ 注意：写的时候他们的顺序尽量不要颠倒，按照 lvha 的顺序。 <!DOCTYPE html> <html lang="en"> <...
伪类选择器的一些简单应用
小小前端的博客
08-14 295
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 伪类选择器的...
CSS-伪类选择器
人丑就要多读书的博客
12-08 1036
一、动态伪类 动态伪类，因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作用户行为伪类，如“:hover”,":active"和":focus"。先来看最常见的锚点伪类 :link ,:visited,:hover,:active, 对于这四个锚点伪类的设置
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值