CSS :first-child 选择器 和 HTML DOM firstChild 属性

最新推荐文章于 2022-12-06 00:52:47 发布
最新推荐文章于 2022-12-06 00:52:47 发布
阅读量156 收藏
点赞数
原文链接：http://www.cnblogs.com/iceflorence/p/6064736.html
版权

CSS 选择器参考手册

实例

选择属于其父元素的首个子元素的每个 <p> 元素，并为其设置样式：

p:first-child
{ 
background-color:yellow;
}

亲自试一试

浏览器支持

IEFirefoxChromeSafariOpera
     

所有主流浏览器都支持 :first-child 选择器。

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

定义和用法

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

亲自试一试 - 实例

例子 1

选择每个 <p> 中的每个 <i> 元素并设置其样式，其中的 <p> 元素是其父元素的第一个子元素：

p:first-child i
{
background:yellow;
}

亲自试一试

例子 2

选择列表中的第一个 <li> 元素并设置其样式：

li:first-child
{
background:yellow;
}

亲自试一试

例子 3

设置每个 <ul> 的首个子元素，并设置其样式：

ul>:first-child
{
background:yellow;
}

亲自试一试

 

HTML DOM firstChild 属性

HTML DOM Element 对象

实例

返回文档的首个子节点：

document.firstChild;

亲自试一试

定义和用法

firstChild 属性返回指定节点的首个子节点，以 Node 对象。

注释：在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。

浏览器支持

IEFirefoxChromeSafariOpera
     

所有主流浏览器都支持 firstChild 属性。

语法

node.firstChild
<!DOCTYPE html>
<html>
<body>

<p id="demo">请点击按钮来获得文档首个子节点的节点名。</p>

<button οnclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var x=document.getElementById("demo");  
x.innerHTML=document.firstChild.nodeName;
}
</script>

</body>
</html>

 

转载于:https://www.cnblogs.com/iceflorence/p/6064736.html

diaojilu3861
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第四篇 HTML5 伪类与伪元素
m0_66451927的博客
01-27 4310
一、伪类 1、概念： CSS伪类（Pseudo-classes）用于定义元素的特殊状态，用来添加一些选择器的特殊效果。下面我们分四种了解伪类，分别是first-child伪类、超链接伪类、CSS类和伪类、其他伪类。 1.1、first-child伪类 概念：first-child 伪类来选择父元素的第一个子元素，选择器匹配作为任何元素的第一个子元素的 <p> 元素。 语法：子元素（选择器）+ 空格 +first-child + {定义的样式}； 看看下面的例子 ...
JS基础知识篇-DOM操作总结
weixin_44164982的博客
07-30 697
DOM-Document Object Model 文档对象模型 第一部分：Dom获取元素 第二部分：DOM属性设置与获取 第三部分：事件（鼠标事件、键盘事件、表单事件）
css :first-child.html
weixin_42193179的博客
11-14 145
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css :first-child</title> <style> /*参考：https://www.runoob.com/cssref/sel-first...
css ul > :first-child.html
weixin_42193179的博客
11-14 285
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css ul > :first-child</title> <style> /*参考：https://www.runoob.com/cssref/s...
css p:first-child i.html
weixin_42193179的博客
11-14 157
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css p:first-child i</title> <style> /*参考：https://www.runoob.com/cssref/sel-fi...
html中怎样选择第几个,CSS选取第几个标签元素：first-child、last-child、nth-child
weixin_30316931的博客
06-03 3602
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个标...
HTML5+CSS3学习笔记（八）伪类选择器first-child、first-of-type、nth-child(n)的区别
Yeee_F
08-16 1420
伪类选择器first-child、first-of-type、nth-child(n)的区别
30-DOM元素的获取
wy1511861159的博客
09-02 406
第一节、DOM元素的获取 1.1、常用的一些获取DOM元素的方法 getElementById(“id值”) 规则：根据元素的id值获取元素，如果多个元素的ID值重复则获取第一个元素。 <script type="text/javascript"> function testById(){ /* document -- 文档--代表当前页面文档--代表当前HTML页面 */ var doc = document.getElementById("p1");
html+css+js基础问答
qq_43751465的博客
08-26 5195
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
HTML5、CSS、JS基础
qq_49101841的博客
03-03 2234
学习笔记
html中body的父节点,（9-10 访问父节点parentNode）关于innerHTML的问题
weixin_42100188的博客
06-10 362
无标题文档javascript基础语法流程控制语句函数事件DOMdasdadfHTML/CSS文字段落表单表格var mylist = document.getElementById("tcon");var a=mylist.parentNode.parentNode.parentNode.lastChild;document.write(a.innerHTML+"");//document.wr...
重复下拉列表的制作、first-child
静下心来，把html学好，这是军令状，不然真的是一无所有了。
12-16 268
1.html代码 stock list webpage news1 css1 css2 css3 css4 css5 css6 news2 css1 css2 css3 css4 css5
DOM - 节点操作
m0_70552412的博客
09-04 1132
网页中所有的内容都是节点（标签，属性，文本，注释等），在DOM中，节点使用 node 来表示HTML DOM 树中所有的节点均可通过 java Script 进行访问，所有HTML元素（节点）均可被修改，也可以创建和删除。一般来说，节点至少拥有nodeType（节点类型） nodeName（节点名称）和nodeValue（节点值）这三个基本属性。元素节点 nodeType 为1属性节点 nodeType 为2文本节点 nodeType 为3 （文本节点包含文字，空格，换行等）
前端——css层叠样式表（盒子模型、div、布局、基本选择器）
Today_He的博客
09-22 520
隔行换色——纯css tr:nth-child(odd) { background-color: azure; } tr:nth-child(even) { background-color:antiquewhite; }
html 样式怎么选中第一项,CSS :first-child 选择器
weixin_35011300的博客
06-22 2232
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。——w3school嗯，乍一看好像说的不是很明白，因此这个选择器很容易让人误解，通常会有两种误解：误解一：认为E:first-child选中E元素的第一个子元素。误解二：认为E:first-child选中E元素的父元素的第一个E元素。你是不是也曾这样理解这个选择器或者现在仍然这样理解？以上两种理解都是错误的，为了证明上面...
伪类选择器:first-child与:first-of-type区别
t1220130004的博客
12-06 537
1、:first-chlid,先找到所有标签里的第一个标签，再进行匹配，例如： 结果：第一个先找到中的第一个孩子标签；第二个找标签中的第一个孩子，，不作用于页面。第三个找标签的第一个孩子，标签；第四个找标签的第一个孩子，标签。最后进行匹配，样式里的p与找到的标签匹配，匹配成功就作用，匹配不成功就不
HTML5 零基础到实战（四）伪类和伪元素笔记
heart_6662的博客
02-10 2051
????个人简介 我已加入 1_bit 博主的免费前端 站起来 学习计划，专栏链接：一哥博客 ???? 作者简介：⭐️大一heart，还在学习（卷）当中，欢迎交流指正~???? ???? 个人主页 heart的博客???? ????如果文章知识点有错误的地方，请指正留言????！和大家一起学习，一起进步 ???? 系列专栏：大话前端???? ????格言：人生舞台的大幕随时都可能拉开，关键是你愿意表演，还是选择躲避???? ????如果感觉博主的文章还不错的话，请????三连支持一下博主????哦 目
html css 选择父亲,css选中父元素下的第一个子元素(:first-child)
weixin_39576104的博客
06-03 3728
前言最近在项目中用到 :first-child 很容易的就想到了，嗯嗯。这不就是选择第一个元素吗？好像很好用，平时使用中也没有遇到什么问题，理所当然的就以为它只会选中父元素下的第一个元素，对孙元素和曾孙元素没有影响。事实证明，我的理所当然是错的。E:first-child的第一个误区(只会选中我规定的区域中的一个，不会遍历其下有多少个孙或曾孙元素)body p:first-child{backgr...
css first-child伪类选择器详解
热门推荐
weixin_44607531的博客
01-26 1万+
三种使用情况 p:first-child 选中同级第一个并且为p的元素 p:first-child em 选中同级第一个并且为p的元素下的em元素 p em:first-child 选中所有p元素下，同级第一个且为em的元素 first-child 代码 <style> p:first-child{ /* 同级第一个并且为p的元素 */ color: red; } </style> <body> ...
javascript nth-child()选择器
最新发布
08-15
`nth-child()` 选择器是 CSS 中的一个伪类选择器，用于选择父元素中特定位置的子元素。在 JavaScript 中，可以使用 `querySelectorAll()` 方法结合 `nth-child()` 选择器来选择符合条件的子元素。 `nth-child()` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值