ul>:first-child到底是什么意思，我也不懂（这是一个提问题的文章）

最新推荐文章于 2022-01-08 09:12:23 发布
最新推荐文章于 2022-01-08 09:12:23 发布
阅读量2.7k 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010523770/article/details/51355230
版权
<!DOCTYPE html>
<html>
<head>
<style>
ul>:first-child
{
background:yellow;
}
</style>
</head>


<body>


<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>可口可乐</li>
</ul>
<ul>
  <div>流奶
<li>this</li>
</div>
  <li>咖啡</li>
  <li>茶</li>
  <li>可口可乐</li>
</ul>


<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>可口可乐</li>
</ol>


<p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。</p>


</body>
</html>
mkl34367803
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript中的firstchild
bofengshuimen700的专栏
05-27 8390
Microsotf Yahoo Easy W3c/Javascript Design|Source var container=document.getElementById("contain");
jQuery中:first-child选择器用法实例
10-24
这个表达式会选取所有`<ul>`列表中的第一个`<li>`元素。这里的`:first-child`部分指定了我们要选取的是`<li>`元素中作为其父`<ul>`的第一个子元素的那个。 在实际应用中，`:first-child`选择器常用于为页面的首项...
css ul > :first-child.html
weixin_42193179的博客
11-14 259
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css ul > :first-child</title> <style> /*参考：https://www.runoob.com/cssref/s...
jq之$(“ul li:first“)
wanggang182007的博客
01-08 311
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq之demo</title> <!--线上jq库--> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script>.
JQuery中$("ul li:first")和$("ul li:first-child")的区别
qq_41700374的博客
11-11 4413
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;菜鸟教程&lt;/title&gt; &lt;script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.j
firstChild,lastChild 获取第一个/最后一个元素节点
林飞的梦呓
12-10 5567
firstChild,lastChild<ul><li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul><script> var ul = document.getElementsByTagName('ul')[0]; ul.firstChild.style.background = '#ff0000';
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
在案例中，`first-child+li+li`会选取紧跟在第一个`<li>`后面的第二个`<li>`，即原本`nth-child(3)`要选中的元素。 以下是调整后的代码示例： ```html <style> ul { list-style: none; } div ul li { width: ...
浅谈jquery选择器 :first与:first-child的区别
11-29
first-child表示（每个父元素的）第一个 $(‘ul li:first’) 返回john所在的li。 查找所有ul下第一个li元素 $(“ul li:first-child”) 返回 john glen。 查找每个ul下第一个元素是li元素dom元素。 扩展用法：$(...
jQuery中:last-child选择器用法实例
10-24
在这个例子中，`:last-child`不是针对`<li>`元素本身，而是指`<li>`元素的父元素中的最后一个`<li>`子元素。这意味着，如果有多组`<li>`元素，每组的最后一个`<li>`都会被选中并改变颜色。这一点很容易被误解，因此...
CSS中first-child和nth-child的讲解
yuyurenjie的博客
11-16 7138
:first-childE:first-child是伪类选择器，很多人都知道它的存在，但是在使用时，可以仍存在误解。说明匹配父元素的第一个子元素E从说明可以看出E是你要选择的第一个子元素，而不是父元素。一开始，误以为E:first-child是E的第一个子元素。举个例子：<ul> <li>l1</li> <li>l2</li> <li>l3</li> </ul>假设选择的是第
论文阅读 (十五)：A Review on Multi-Label Learning Algorithms (2013)
因吉的博客
11-02 718
引入   论文地址：http://palm.seu.edu.cn/zhangml/files/TKDE’13.pdf   主要内容：   1）多标签定义及评价指标；   2）具体分析八种代表算法；   3）总结部分学习设置。
css3/H5新特性、浏览器兼容性问题
xingyunwei1的博客
09-08 474
css3/H5新特性 css3新特性 选择器 背景和边框 文本效果 2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation) 选择器 last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子 */ :nth-child(1) /* 按照第几个孩子给它设置样式 */ :nth-child(even) /* 按照偶数 */ :nth-child(odd) /* 按照奇数 */ :disab...
$(“ul li:first-child“)与$(“ul li:first“)的踩坑
漫天随飞雪的博客
09-24 785
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 $("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
CSS: :last-child 与 :first-child的坑
热门推荐
weixin_39015132的博客
07-23 5万+
原文链接 前言 前端开发中，我们有时候要为第一个或最后一个元素设置进行某些特殊的操作。CSS默认为我们提供了:last-child和:first-child选择器， 但是在实际使用中，要特别需要注意一个点。 开始 :last-child:指定属于其父元素的最后一个子元素的 p 元素的背景色。（来自W3C的官方描述） 实践 HTML: <div class="div1"&gt...
:first-child 的坑（first-child的伪类选择器不起作用）
璃月之天涯的博客
07-27 1万+
比如下面的代码，刚开始不知为什么 ：first-child的伪类选择器不起作用，而last-child却有作用 尊敬的用户您好，您的入职流程需要按照如下步骤进行操作，了解流程后即可前往填写相关信息 填写入职资料和身份信息 (包括身份证账号和照片等) 查看相关规章制度并确认 签劳动合同
结构伪类选择器
qq_64970126的博客
01-07 2488
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素 选择符 解析 E:first-child 匹配父元素中的第一个子元素 E E:first-child 匹配父元素中最后一个E元素 E:nth-child(n) 匹配父元素中的第n个子元素E E:first-of-type 指定类型E的第一个 E:last-of-type 指定类型E的最后一个 E:nth-of-type(n) 指定类型E的第n个 第一种对E:f
css连续选取几个li_CSS选取第几个标签元素：nth-child、first-child、last-child
weixin_35034072的博客
12-23 2101
1、first-childfirst-child表示选择列表中的第一个标签。代码如下：li:first-child{background:#090}上面的意思是，li 列表中的 第一个li模块的背景颜色。2、last-childlast-child表示选择列表中的最后一个标签，代码如下：li:last-child{background:#090}3、nth-child(3)表示选择列表中的第3个标...
JS中，children和childNodes的不同之处
sunling的专栏
11-21 1万+
var ul = document.getElementById("ul"); var children =  ul.children; console.log(children.length);//children 只选择元素节点,没有兼容性问题（但是IE678 会包含注释节点，尽量不在里面写注释）  children常用 //childnodes方法获取孩子节点   //var c
jQuery中选择器:first和:first-child的区别
JiangNanMax的博客
10-03 5790
jQuery中选择器:first和:first-child的区别 :first选择器 :first选择器用于选择匹配到的第一个元素，将其封装为jQuery对象后返回。其效果等价于:eq(0)选择器 :first-child选择器 :first-child选择器用于选择作为父元素的第一个子元素的元素，将其封装为jQuery对象后返回。其效果等价于:nth-child(1)选择器 选择器:fi...
.heard ul li:first-child { color: #fff; background-color: #7194BF; }什么意思
最新发布
06-12
- `.heard ul li:first-child`：这是一个CSS选择器，它匹配文档中第一个 `li` 元素。`heard` 是该元素所在的父元素的class，`ul` 是该元素所在的父元素的标签名，`:first-child` 是伪类选择器，表示选中该元素是其父...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值