码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-11-21 12:29:33      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:click   on()   bsp   cli   nodename   function   name   tor   innerhtml   

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 属性

实例

返回文档的首个子节点:

document.firstChild;

亲自试一试

定义和用法

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

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

浏览器支持

IEFirefoxChromeSafariOpera
         

所有主流浏览器都支持 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 属性

标签:click   on()   bsp   cli   nodename   function   name   tor   innerhtml   

原文地址:http://www.cnblogs.com/iceflorence/p/6064736.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!