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三大特性 一. ...
随机推荐
- C#设计模式系列：状态模式（State）
1.状态模式简介 1.1>.定义 状态模式的核心思想是允许一个对象在它的内部状态改变时改变它的行为,即不同的状态对应不同的行为. 状态模式的针对性很强,当有状态变化的时候可以选择状态模式. 1. ...
- 利用typescript使backbone强类型智能提示
模型类一旦多了没有强类型和智能提示是相当痛苦的,所以. 仅仅用ts定义一个模型类: class Person extends Backbone.Model { defaults = { Name:&q ...
- 用jquery.pager.js实现分页
1.html <link href="/stylesheets/Pager.css" rel="stylesheet" type="text/c ...
- MVC5 网站开发实践 1、建立项目
目录 MVC5 网站开发实践 概述 一.建立项目 1.建立团队项目 在办公室和家里使用不同的电脑,为了方便代码的共享将项目建立为团队项目. 如图打开vs2013→新建→团队项目(图1),会自动 ...
- Bootstrap Metronic 学习记录（二）菜单栏
1.简介 1) .环境配置 2) .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置 项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQ ...
- MyCAT ER分片的验证
在这里,构造了两张表,熟悉Oracle的童鞋都知道,dept(部门表)和emp(员工表),其中dept中的deptno是emp表中dept_no的外键. 两表的建表语句如下: create table ...
- 【记录】ASP.NET IIS ISAPI_Rewrite
下载地址(Lite 免费版):Download ISAPI_Rewrite 3 配置(导入自定义 httpd.ini 文件): IIS ISAPI 筛选器(不需要重写的站点可以移除): 参考资料: 主 ...
- C算法编程题（五）“E”的变换
前言 上一篇<C算法编程题(四)上三角> 插几句话,说说最近自己的状态,人家都说程序员经常失眠什么的,但是这几个月来,我从没有失眠过,当然是过了分手那段时期.每天的工作很忙,一个任务接一个 ...
- MongoDB性能优化
一.索引 MongoDB 提供了多样性的索引支持,索引信息被保存在system.indexes 中,且默认总是为_id创建索引,它的索引使用基本和MySQL 等关系型数据库一样.其实可以这样说说,索引 ...
- 《Kafka Stream》调研：一种轻量级流计算模式
原文链接:https://yq.aliyun.com/articles/58382 摘要: 流计算,已经有Storm.Spark,Samza,包括最近新起的Flink,Kafka为什么再自己做一套流计 ...