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三大特性 一. ...
随机推荐
- Hexo的Next主题配置
使用Next主题 在这里Downloads Next主题代码 将下载的代码放在myBlog/next目录下 设置站点myBlog/_config.yml的theme字段值为next 生成新页面hexo ...
- 【SQL】SQL Server登录常见问题
很多人SQL装的很不规范,导致各种问题或者说时间长了,密码给忘记了,怎么办呢?重装? 逆天就拿几个比较常见的来说事吧,首先是各种设置的问题:(我家里用的是简易版,你们开发最好用企业版) ...
- 移动web app开发必备 - Deferred 源码分析
姊妹篇 移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...
- 前端MVVM框架设计及实现（一）
最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的avalon开始了,我记得还是去年6月写过一个系列的av ...
- MyEclipse 2014（激活）
激活 破解附件包下载:http://pan.baidu.com/s/1c27Dwe0 提取密码:qy38 详细破解步骤请参考:http://blog.my-eclipse.cn/myeclipse-2 ...
- javascript面向对象系列第四篇——选项卡的实现
前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...
- ASP.NET Core的配置（3）： 将配置绑定为对象[上篇]
出于编程上的便利,我们通常不会直接利用ConfigurationBuilder创建的Configuration对象读取某个单一配置项的值,而是倾向于将一组相关的配置绑定为一个对象,我们将后者称为Opt ...
- Create Volume 操作（Part I） - 每天5分钟玩转 OpenStack（50）
前面已经学习了 Cinder 的架构和相关组件,从本节我们开始详细分析 Cinder 的各种操作,首先讨论 Cinder 如何创建 volume. Create 操作流程如下: 客户(可以是 Open ...
- EntityFramework 7 Linq Contains In 奇怪问题（已修复）
问题说明: 博客问题纪录 Use EF7, Linq Contains In is error. EF7 Code Commit adding (client side) support for Co ...
- Mybatis-mapper-xml-基础
今天学习http://www.mybatis.org/mybatis-3/zh/sqlmap-xml.html.关于mapper.xml的sql语句的使用. 项目路径:https://github.c ...