CSS 选择器参考手册

实例

选择属于其父元素的首个子元素的每个 <p> 元素，并为其设置样式：

p:first-child

{

background-color:yellow;

}

亲自试一试

浏览器支持

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

实例

返回文档的首个子节点：

document.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 属性的更多相关文章

  1. css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景

    什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...

  2. HTML DOM firstChild lastChild nextSibling previousSibling 属性_获取属性值的undefined问题

    <html> <head> <title>HTML示例</title> <style type="text/css"> ...

  3. JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  4. css伪类选择器的查找顺序

    当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...

  5. 如何使用CSS伪类选择器

    总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...

  6. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  7. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  8. css的各种选择器

    一.基本选择器 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #foot ...

  9. 前端基础-CSS的各种选择器的特点以及CSS的三大特性

    一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...

随机推荐

  1. Security1:Create Login

    Login 用于登陆SQL Server,语法是 -- Syntax for SQL Server CREATE LOGIN login_name { WITH <option_list1> ...

  2. IOS下载查看PDF文件(有下载进度)

    IOS(object-c) 下载查看 PDF 其实还是蛮容易操作的.在下载前,首先要把 IOS 可以保存文件的目录给过一遍: IOS 文件保存目录 IOS 可以自定义写入的文件目录,是很有限的,只能是 ...

  3. AngularJS之Scope及Controller（一）

    前言 之前有接触过基本的AngularJS,未过多涉及,于是乎本系列我们来着重讲讲AngularJS,对AngularJS中重要的几大内容进行梳理并进行一些小的例子的书写.在之前项目过程中用到过ava ...

  4. iOS开发之新浪微博山寨版代码优化

    之前发表过一篇博客“IOS开发之新浪围脖”,在编写代码的时候太偏重功能的实现了,写完基本功能后看着代码有些别扭,特别是用到的四种cell的类,重复代码有点多,所以今天花点时间把代码重构一下.为了减少代 ...

  5. 实现tap的多种方式

    一.tap.js 这是一个比较轻量的插件tap.js,142行代码,支持模块化开发. 1)handleEvent addEventListener方法中的第二个参数,我原先并没有注意到其实可以传一个对 ...

  6. 触屏touch事件记录

    一.chrome中的Remote Debugging 一开始并没有用这个调试,不过后面需要多点触碰,可chrome模拟器中我没看到这个功能.突然看到了Remote Debugging,网站需要FQ才能 ...

  7. C++运算符重载

    C++运算符重载 基本知识 重载的运算符是具有特殊名字的函数,他们的名字由关键字operator和其后要定义的运算符号共同组成. 运算符可以重载为成员函数和非成员函数.当一个重载的运算符是成员函数时, ...

  8. FusionChart 水印破解方法（代码版）

    网上一直找不到有关去除水印的方法! 正好做项目要用到这个鬼东西,折腾了一天,总算破解成功,把方法告诉大家. 先看下破解前的效果. 这是个很烦人的东西,而且有一个更加让人烦人的地方, 就是根本无法买!为 ...

  9. Not a git repository (or any of the parent directories): .git

    今天准备在win10上面安装git,想把代码发布到github中,按照教程的方法一步一步下来,当配置完ssh和用户名,邮箱之后,发现下拉不下来github中的代码,出现如下错误. 说是没有发现仓储,很 ...

  10. jquery如何判断checkbox（复选框）是否被选中 ...

    <script type="text/javascript" src="../lib/jQuery1.11.1.js"></script> ...