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>