CSS :first-child 选择器 和 HTML DOM firstChild 属性
2016-11-21 11:17
1006 查看
CSS 选择器参考手册
实例
选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式:p:first-child
{
background-color:yellow;
}
[/code]
亲自试一试
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
注释:对于 IE8 及更早版本的浏览器中的 :first-child,必须声明 <!DOCTYPE>。
定义和用法
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。亲自试一试 - 实例
例子 1
选择每个 <p> 中的每个 <i> 元素并设置其样式,其中的 <p> 元素是其父元素的第一个子元素:p:first-child i
{
background:yellow;
}
[/code]
亲自试一试
例子 2
选择列表中的第一个 <li> 元素并设置其样式:li:first-child
{
background:yellow;
}
[/code]
亲自试一试
例子 3
设置每个 <ul> 的首个子元素,并设置其样式:ul>:first-child
{
background:yellow;
}
[/code]
亲自试一试
HTML DOM firstChild 属性
HTML DOM Element 对象实例
返回文档的首个子节点:document.firstChild;
亲自试一试
定义和用法
firstChild 属性返回指定节点的首个子节点,以 Node 对象。注释:在 HTML 中,文本本身是 HTML 元素的父节点,HEAD 和 BODY 是 HTML 元素的子节点。
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
语法
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>
相关文章推荐
- HTML与CSS基础之属性选择器(二)
- [CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)
- 使用css属性:nth-child(n)匹配选择第n个子元素
- 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结
- 让IE7/8使用CSS中first-child和last-child样式属性
- html之css属性选择器,伪类,继承,选择器优先级,float
- CSS规则树和HTML的DOM树合成渲染树时渲染结点与选择器链的匹配
- JavaScript HTML DOM - 改变 CSS 及元素属性
- 浏览器加载渲染HTML、DOM、CSS、 javascript、image、flash、iframe、src属性等资源的顺序总结
- jQuery学习笔记:DOM操作(二)——属性、类、HTML、CSS
- css入门之html选择器,ID选择器,类选择器,属性选择器
- $("INFO_ORGCODE").el.dom.parentNode.parentNode.firstChild.innerHTML = '人员代码';
- 一个学习html(dom),js,css,xml等所有web技术的好网站
- HTML属性以及相对应的CSS方法(转载)
- HTML 事件与属性,网页设计中常用的CSS属性,HTML ASCII 代码参考手册
- js/jq修改或获取CSS属性,DOM属性
- HTML DOM & JavaScript & CSS
- HTML DOM (三)DOM的常用属性和方法
- 1st JavaScript Editor Pro 3.8,强大的JavaScript开发工具(JavaScript IDE),完美支持CSS, HTML, DOM and DHTML开发、校验、调试
- HTML DOM rowIndex 属性