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. Performance Monitor2：Peformance Counter

    Performance Counter 是量化系统状态或活动的一个数值,Windows Performance Monitor在一定时间间隔内(默认的取样间隔是15s)获取Performance Co ...

  2. 设置Distribution clean up 每次删除Command的数量

    Replication Job “Distribution clean up: distribution” 默认设置是,每10minutes运行一次,每次删除2000个Command.这对于有1.9亿 ...

  3. 【WP开发】记录屏幕操作

    在某些应用中,比如游戏,有时候需要将用户的操作记录下来.ScreenCapture类提供了这个功能.但必须注意的是:此屏幕记录功能只对当前应用程序的屏幕有效,即只有当前应用程序在前台运行时才有效. 与 ...

  4. RSA密钥,JAVA与.NET之间转换

    最近在做银联的一个接口,用到RSA签名,悲剧来了,.net用的RSA密钥格式和JAVA用的不一样 .net为XML格式 <RSAKeyValue><Modulus>53Knuj ...

  5. 【记录】SqlBulkCopy 跨数据库，表自定义导入

    使用场景: 一个数据库中的表数据,导入到另一个数据库中的表中,这两个表的表结构不一样,如果表结构一样的时候,导入非常简单,直接读取导入就行了,表结构不一样,就意味着需要加入一些判断,SqlBulkCo ...

  6. PHP面试题目搜集

    搜集这些题目是想在学习PHP方面知识有更感性的认识,单纯看书的话会很容易看后就忘记. 曾经看过数据结构.设计模式.HTTP等方面的书籍,但是基本看完后就是看完了,没有然后了,随着时间的推移,也就渐渐忘 ...

  7. 探秘Tomcat——连接器和容器的优雅启动

    前言: 上篇<探秘Tomcat——启动篇>粗线条的介绍了在tomcat在启动过程中如何初始化Bootstrap类,加载并执行server,从而启动整个tomcat服务,一直到我们看到控制台 ...

  8. MongoDB - basic

    mongoDB basic from:http://www.tutorialspoint.com/mongodb prject:https://github.com/chenxing12/l4mong ...

  9. 【原创】SQL审核系统

    前言 应公司dba的需求,做了一个sql审核并可以执行.记录的系统,整个系统有三种角色: DBA(需要管理员手动登记) 运维人员(需要管理员手动登记) 开发人员(默认注册后用户) 权限分配如下: 一些 ...

  10. webServices与Web服务

    本篇的内容在MSND中标注已是一项旧技术,而取而代之的是WCF, 那么我也放弃吧!但是这个属于Web服务的范畴,而WCF本质上也是一个Web服务来的,所以对于基础的东西还是不变的.那么这次就着重看看这 ...