CSS :first-of-type 选择器

最新推荐文章于 2024-07-11 10:19:46 发布
最新推荐文章于 2024-07-11 10:19:46 发布
阅读量208 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lengqingIT/article/details/88806183
本文介绍如何使用CSS中的:first-of-type选择器来选中特定类型的第一个子元素，并通过一个简单的HTML示例进行展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

HTML 用法

<body>

  <h1>:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素</h1>
  <h3>实例:选择的 p 元素是其父元素的第一个 p 元素</h3>
<p>半暖茶港</p>
<p>半暖茶港</p>
<p>半暖茶港</p>

</body>

CSS 用法

p:first-of-type
{
	background:#ff0000;
}
CSS：好玩的‘伪类’系列之——(:nth-of-type()、:first-of-type和:last-of-type)
gavincz的博客
04-30 1446
:nth-of-type() 定义：在拥有同一父元素的情况下（前提），匹配一组相同的兄弟元素，修改其样式 触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇数元素；也可以使用关键字odd（代表奇数）和even（代表偶数），修改指定的元素样式 兼容：IE8及8以下不支持Opera9.5以下不支...
CSS选择器大全包含nth-child和nth-of-type的区别
dany的博客
08-16 816
详解nth-child和nth-of-type的区别和用法，简单易懂，包含基本选择器以及特殊选择器的解释以及用法
first-of-type选择器
09-14 570
“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示： 通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。 HTML代码： 我是一个块元素，我是.wrapper的第一个子元
【CSS3】first-of-type选择器
O(∩_∩)O
02-23 606
“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示： 通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。 HTML代码： 我是一个块元素，我是.wrapper的第一个子元
:first-of-type | CSS属性参考
初晴
09-19 1623
CSS :first-of-type伪类选择器用于匹配元素的所有子元素类型中第一个出现的子元素。 换句话来说。:first-of-type伪类选择器匹配父元素中第一次出现的某类子元素的第一个元素，例如： article>   h1>标题h1>   p>     第一个段落...   p>   p>     第二个段落...
css:first-child和first-of-type
小瑾沐晚风的博客
08-24 1746
块内区域首个元素的css样式可以通过first-child、first-of-type 和 nth-of-type()实现。对于 IE8 及更早版本的浏览器中，必须声明 <!DOCTYPE>。 first-child:选择器用于选取属于其父元素的首个子元素的指定选择器 first-of-type:选择器匹配属于其父元素的特定类型的首个子元素的每个元素 nth-of-type(x):选择器匹配属于其父元素的特定类型的第x个子元素的每个元素 话不多说，先上代码： <div>
html设置type选择器,css :first-of-type选择器实例讲解
weixin_35282584的博客
06-04 2761
css:first-of-type介绍css :first-of-type选择器用于匹配父元素的第一个特定子元素。语法：:first-of-type {style properties}如：p:first-of-type用于匹配父元素里的第一个p元素。css:first-of-type实例设置其父级的第一个p元素的背景色p:first-of-type{background:#ff0000;}T...
:first-child 和:first-of-type
07-28
所以，两个选择器的区别在于:first-child选择器只匹配其父元素中的第一个子元素，而:first-of-type选择器匹配其父级是特定类型的第一个子元素。 #### 引用[.reference_title] - *1* [css:first-child和first-of-type...
CSS3.0金矿：深入理解:first、:last与:nth-of-type选择器
在这个例子中，作者使用了`.block`类选择器，并展示了`:nth-of-type(3n+1)`伪类选择器的用法。`:first-of-type`伪类用于选取其父元素中第一个具有特定类型的子元素，而`:last-of-type`则相反，选取最后一个。这里...
CSS3的first-child选择器实战攻略
09-24
- **:first-of-type选择器**：这个选择器类似于first-child，但它并不局限于第一个子元素，而是选择其父元素下的第一个特定类型的子元素。也就是说，不论这个特定类型元素在父元素下的位置如何，只要它是该类型中的...
css3选择器first-of-type属性作用及用法剖析
aisivisual的博客
03-05 4109
在 CSS3 中，first-of-type 选择器是一种强大且实用的选择器，用于选取父元素下的第一个特定类型的子元素。通过使用 first-of-type 属性，我们可以更精确地控制样式，实现更复杂的布局和设计。
调查：CSS3：First-Of-Type结构选择器
cune1359的博客
07-03 401
本文是我们的“ HTML5 / CSS3教程系列”的一部分 -致力于帮助您成为更好的设计师和/或开发人员。 单击此处查看同一系列的更多文章。 我对CSS3钟爱的一件事是新增了选择器，它使我们无需依靠class ， id或其他元素属性就可以专门定位元素，下面将介绍选择器：first-of-类型 。 :first-of-type选择器将定位到指定元素的第一个子元素，例如，下面的代码片段将定...
first-of-type、last-of-type选择器
justforuse的博客
03-29 383
原文链接: https://justforuse.github.io/blog/zh-cn/2020/03/last-of-type-tutorial/
深入理解CSS中的:first-child与:first-of-type选择器
最新发布
My_wife_QBL的博客
07-11 1798
选择作为其父元素的第一个子元素的元素。：选择作为其父元素的第一个指定类型的子元素的元素。和是CSS中常用的伪类选择器，它们在选择元素时具有不同的行为和应用场景。理解这些区别有助于开发者在实际项目中选择合适的选择器来实现所需的样式效果。：适用于需要选择父元素的第一个子元素的场景，但需要注意它必须是父元素的第一个子元素。：适用于需要选择父元素中同类型子元素中的第一个的场景，可以跨越不同类型的子元素。希望本文能为大家提供一个清晰的理解和实用的指导，帮助大家在实际开发中更好地应用和选择器。
关于input标签:focus更改样式的问题
热门推荐
阿猫搬砖丶
01-11 4万+
input标签的border和outline 总觉得是一个自己踩了很多次的坑 若希望实现input在触发焦点时更改样式，通常会想到使用:focus选择器，但当使用border去更改样式时，会发现失效了: input[type=text]:focus{ border: 1px solid #AFECAB; } 这里是希望改成浅绿色边框，发现不起作用，也无关层级，因为加了!important也没有...
选择器first，first-child和first-of-type的区别
wuyujin1997的博客
01-21 821
区分 p:first：在所有p元素中选择第一个。 如果把每个节点当做父节点。遍历其下的子节点们。 p:first-of-type：选中同层次子节点中第一个p标签子元素。 p:first-child：同层次子节点中的大儿子是不是p标签，是的话选中，不是的话不选中。 文档： p:first：The first &amp;lt;p&amp;gt; element. p:first-child：All &amp;l...
html+js仿百度搜索框，点击和回车跳转百度搜索
集电极
10-28 4666
html+js仿百度搜索框，点击和回车跳转百度搜索 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .container { width: 500px;
css3 first of type,css3属性:first-of-type带class写法各大浏览器都不能识别，失效，遇到css bug啦？...
weixin_28883589的博客
08-03 578
经常写页面的前端，相信对E:first-child 、E:nth-child这种伪类选择符 Pseudo-Classes Selectors的写法并不陌生，但其实伪类选择符不仅仅只有你经常用的这几种写法，如下表：伪类选择符 Pseudo-Classes Selectors语法关键词：匹配父元素内的****语法关键词：匹配父元素内同类型标签元素中的****E:first-childE:first-...
css选择器:first-child和:first-of-type的差别
chenwf
08-14 583
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。 :first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。 &lt;div&gt; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值