首页 > 代码库 > CSS :first-child 选择器 和 HTML DOM firstChild 属性
CSS :first-child 选择器 和 HTML DOM firstChild 属性
CSS 选择器参考手册
实例
选择属于其父元素的首个子元素的每个 <p> 元素，并为其设置样式：
p:first-child
{
background-color:yellow;
}
亲自试一试
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有主流浏览器都支持 :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 元素的子节点。
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有主流浏览器都支持 firstChild 属性。
语法
node.firstChild
<!DOCTYPE html> <html> <body> <p id="demo">请点击按钮来获得文档首个子节点的节点名。</p> <button onclick="myFunction()">试一下</button> <script> function myFunction() { var x=document.getElementById("demo"); x.innerHTML=document.firstChild.nodeName; } </script> </body> </html>
CSS :first-child 选择器 和 HTML DOM firstChild 属性
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。