CSS :first-child 选择器 和 HTML DOM firstChild 属性
CSS 选择器参考手册
浏览器支持
| 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 属性
定义和用法
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 属性的更多相关文章
- css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景
什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...
- HTML DOM firstChild lastChild nextSibling previousSibling 属性_获取属性值的undefined问题
<html> <head> <title>HTML示例</title> <style type="text/css"> ...
- JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
- css伪类选择器的查找顺序
当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...
- 如何使用CSS伪类选择器
总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- 关于CSS伪类选择器
#CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...
- css的各种选择器
一.基本选择器 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #foot ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
随机推荐
- 浅析z-index（覆盖顺序）和定位
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- EF-InvalidOperation系列
1.InvalidOperation强制转换为值类型 'System.Guid' 失败,因为实例化的值为 null.结果类型的泛型参数或查询必须使用可以为 null 的类型 错误信息: The cas ...
- CSS系列：CSS文字样式
1. 设置字体 在CSS中字体通过font-family属性来设置. font-family: Verdana, Arial, Helvetica, sans-serif; 上面的字体设置告诉浏览器首 ...
- 在SQL Server中将数据导出为XML和Json
有时候需要一次性将SQL Server中的数据导出给其他部门的也许进行关联或分析,这种需求对于SSIS来说当然是非常简单,但很多时候仅仅需要一次性导出这些数据而建立一个SSIS包就显得小题大做 ...
- .Net 转战 Android 4.4 日常笔记（8）--常见事件响应及实现方式
在Andrioid开发中,常见的事件如下 单击事件 OnClickListener 长按事件 OnLongClickListener 滑动事件 OnTouchListenner 键盘事件 OnKeyL ...
- iOS开发之抽屉效果实现
说道抽屉效果在iOS中比较有名的第三方类库就是PPRevealSideViewController.一说到第三方类库就自然而然的想到我们的CocoaPods,今天的博客中用CocoaPods引入PPR ...
- PHP过滤各种HTML标签
$str=preg_replace("/<\s*img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i&q ...
- 用Spire.doc来合并邮件
用Spire.doc来合并邮件 让我们想象一下这样的场景:你在一家IT公司上班.某天公司的某一产品大幅度升级了.然后你需要通知所有的客户.这真是很长的名单.一个个的通知他们是有点蠢的,因为这要花费 ...
- WebGIS中一种根据网格索引判断点面关系的方法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 判断点面关系的算法有很多,在我之前的博文中有一篇专门对其进行 ...
- 浅尝ECMAScript6
浅尝ECMAScript6 简介 ECMAScript6 是最新的ECMAScript标准,于2015年6月正式推出(所以也称为ECMAScript 2015),相比于2009年推出的es5, es6 ...