first-child，关于伪类

中文域名测试与CSS伪类试验
最新推荐文章于 2025-10-08 10:41:29 发布
原创 最新推荐文章于 2025-10-08 10:41:29 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#测试

博主今晚将中文主页挂到网上，测试的中文域名无法使用，认为免费服务不佳。还提到在制作过程中发现CSS伪类，如li:first-child{}，尝试用其实现菜单竖隔线效果未成功，后续还将试验，指出first-child、first-letter、first-line等伪类在排版中作用大。

先说说今天晚上作了些什么
中文的主页我已经挂到网上去了
今天测试的那个alvar.chinese.cn.com的中文域名好像不能够用了
真是气死我了
免费的东西服务果然不好啊！！！

在做的时候，发现了一个伪类
li:first-child{}
这样在456berea street中
他实现了三个菜单有两个竖隔线的效果
我稍微的试验了一下
没有成功，后来因为忙着把主页赶出来
也就没有再做，明天要个这个试验出来

伪类的这几个很有用
一个first-child可以设置导航的隔线
一个first-letter实现首字大些简直是易如反掌
一个first-line也可让第一行凸现出来

这个在排版中一定可以发挥大作用 ^_^

first-child
易天海
12-06 340
$("#quitLoss>a:first-child").addClass('curr'); $('#numbe').focus(); $('#numbe').blur();  
CSS:first-child 和 nth-child 的区别及用法详解
DevSavantX的博客
09-29 1168
`:first-child` 选择器用于选取父元素下的第一个子元素。它是基于元素在父元素中的位置进行选择，而不考虑其他条件。``:nth-child` 选择器允许选择父元素中特定位置的子元素。它使用一个表达式作为参数，用来确定要选择的子元素的位置。是两个常用的伪类选择器，用于选择元素的特定位置或顺序。虽然它们都可以用来选择子元素，但它们在选择的方式和作用上有一些区别。选择器也可以使用更复杂的表达式，如。（选择每隔两个元素的子元素）。（选择奇数位置的子元素）或。选择器具有更大的灵活性。
CSS :first-child 伪类
慕容绝艳的博客
08-11 555
http://www.w3school.com.cn/css/pr_pseudo_first-child.asp 定义和用法 :first-child 伪类向元素的第一个子元素添加样式。 说明 利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素
first-child（转自：http://www.aa25.cn/css2/pseudo_class_first-c677.shtml）
guoyiqi
08-25 242
定义 :first-child伪类向属于其他元素的第一个子元素的一个元素添加特殊样式.。 说明 利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能认为这会选择作为段落第一个子元素的元素，但事实上并非如此，如果要选择段落的第一个子元素，应当写...
深入解析 CSS `:first-child` 伪类：精准定位第一个子元素
最新发布
2501_93104808的博客
10-08 961
CSS :first-child 伪类选择器用于匹配父元素的第一个子元素，常用于排版优化和样式突出。核心功能是为同级元素中的首个元素应用特殊样式，如移除列表首项间距、设置首段特殊格式等。它与 :first-of-type 的关键区别在于：前者要求元素既是特定类型又是第一个子元素，后者只需是同类元素的第一个。该选择器兼容性好（支持IE7+），但在现代布局中可用 gap 属性替代间距处理。典型应用包括列表样式优化和文章首段特殊处理，使用时需注意父子关系。
关于css中的伪类first-child的一些相关知识点
若雨微霜的博客
08-17 1702
关于css中的伪类first-child的一些相关知识点问题：之前在公司的一个后台PHP项目中碰到了一个问题，大致的意思我用自己相对简洁的代码代替，大致的意思就是有多个以requre为类的div，与我用div.requre label:first-child::before 想对requre下面的第一个label前面添加before伪类，但是这样做的结果是第二个以requre为类的div当中原本只需
html css 选择父亲,css选中父元素下的第一个子元素(:first-child)
weixin_39576104的博客
06-03 3868
前言最近在项目中用到 :first-child 很容易的就想到了，嗯嗯。这不就是选择第一个元素吗？好像很好用，平时使用中也没有遇到什么问题，理所当然的就以为它只会选中父元素下的第一个元素，对孙元素和曾孙元素没有影响。事实证明，我的理所当然是错的。E:first-child的第一个误区(只会选中我规定的区域中的一个，不会遍历其下有多少个孙或曾孙元素)body p:first-child{backgr...
css选中父元素下的第一个子元素(:first-child)
11-19
在CSS（层叠样式表）中，`:first-child`伪类选择器是一个非常有用的工具，它允许我们选择并应用样式给父元素下的第一个子元素。然而，在实际使用中，可能会出现一些误解，导致预期效果与实际效果有所偏差。本文将...
CSS伪类:last-child与:first-child失效原因解析
本文围绕“CSS伪类不生效”这一常见问题展开深入分析，重点聚焦于`:first-child`和`:last-child`这两个结构性伪类的应用场景、失效原因以及解决方案。通过理解其底层机制与HTML结构之间的关系，可以有效避免开发过程...
CSS的:only-child伪类：精准定位单一子元素的样式艺术
2402_85758349的博客
08-18 1017
伪类选择器是CSS中用来选择元素的特定状态或属性的关键字。例如，:hover伪类用于选择鼠标悬停时的元素。伪类则用于选择唯一的子元素。
css伪类 first-child 和 nth-last-child 实现确定子元素个数
qq_32945453的博客
06-13 884
css伪类函数确定子元素个数 从而实现子元素不同显示方式
伪类(:first-child、:focus、:hover、:last-child、:nth-child(n)、:nth-last-child(n)等)和伪元素(::after、::before等)
weixin_41549971的博客
01-04 1750
伪类(:first-child、:focus、:hover、:last-child、:nth-child(n)、:nth-last-child(n)等)和伪元素(::after、::before等)
css伪类选择器之:first-child和:first-of-type
阿信随笔的博客
05-24 1329
前不久使用伪类选择器的时候，发现有两组用法极为相似的，一组是:first-child、:last-child、:nth-child(n)，另一组是:first-of-type、:last-of-type、:nth-of-type(n)。谈一谈在使用中的“诡异”，以及两组伪类选择器的区别。 一、first-child“时灵时不灵” 以前对伪类选择器还不是很熟悉的时候，有时候会发现:first-c
CSS :first-child选择器
lengqingIT的博客
03-20 842
HTML 用法 <body> <p>:first-child 选择器匹配其父元素中的第一个子元素</p> <h1>匹配 p 的父元素的第一个 p 元素</h1> <p>www.semi-warm.com</p> <div> <p>www.semi-warm.com</p...
css:first-child和first-of-type
小瑾沐晚风的博客
08-24 1824
块内区域首个元素的css样式可以通过first-child、first-of-type 和 nth-of-type()实现。对于 IE8 及更早版本的浏览器中，必须声明 <!DOCTYPE>。 first-child:选择器用于选取属于其父元素的首个子元素的指定选择器 first-of-type:选择器匹配属于其父元素的特定类型的首个子元素的每个元素 nth-of-type(x):选择器匹配属于其父元素的特定类型的第x个子元素的每个元素 话不多说，先上代码： <div>
一分钟理解:first-child :first-of-type,看完还不会 打我
qq_34297738的博客
08-11 3680
css伪类:first-child :first-of-type，一分钟理解:first-child :first-of-type,看完还不会 打我
css中选取子元素
生存不忘生活
08-08 6084
1、first-child first-child表示选择列表中的第一个标签。代码如下： li:first-child{background:#090} 上面的意思是，li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签，代码如下： li:last-child{background:#090} 3、nth-ch
有关 :first-child的理解
热门推荐
师兄阿离的博客
10-29 2万+
最近在做项目，突然发现一个选择器非常特别，所以特意去了解了一下，下面把我自己所理解的意思写下来。 在W3School里面讲   ：first-child选择器用于选取属于其父元素的首个子元素的指定选择器。 我刚一看这个我也是看的迷迷糊糊，这讲的是什么意思，我把他理解成是他的第一个元素。然后就傻傻的的去测试，也不知道自己弄什么。然后出现了一些错误，下面我就一一例举有关：first-child的内...
CSS伪类选择器中的:first-child、:last-child以及:nth-child(n)
goulite的博客
10-11 3340
不知道大家在使用first-child、last-child以及nth-child（）时有没有遇到过以下问题： 当时用选择器p:first-child并对其进行样式设置时，除了第一个p以外，div中的第一个p也会被设置样式。w3c中对于:first-child的解释是 “:first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。”也就是说，p:first-chil...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值