codecamp

CSS :first-child 伪元素

CSS :first-child 选择器

CSS完整选择器完整CSS选择器参考手册

定义和用法

:first-child选择器匹配第一个子元素。

:first-child是一个伪类,它适用于任何元素,它是另一个元素的第一个子元素。

使用:first-child伪类,一个元素只有当它是另一个元素的第一个子元素时才匹配。例如,p:first-child将选择作为某个其他元素的第一个子元素的任何p元素。如果要选择段落的第一个子元素,我们可以使用p>*:first-child。

例子:

body *:first-child {font-weight: bold;}
p:first-child  {font-size: 125%;}

Examples

实例

实例 1

匹配属于父元素中第一个子元素的每个<p>元素

p:first-child
{
  background-color:yellow;
}

尝试一下 »

实例 2

<p>元素是其父级的第一个子元素,每个<p>元素的 <i>元素的样式:

p:first-child i
{
  background:yellow;
}

尝试一下 »

实例 3

列表中的第一个 <li>元素选择的样式:

li:first-child
{
  background:yellow;
}

尝试一下 »

实例 4

每一个<ul>元素的第一个子元素选择的样式::

ul>:first-child
{
  background:yellow;
}

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

选择器          
:first-child 4.0 7.0 3.0 3.1 9.6

注意: :first-child在IE8和更早版本IE版本中必须声明<!DOCTYPE>


相关文章

CSS 教程: CSS 伪类


CSS完整选择器完整CSS选择器参考手册

CSS3 :enabled 选择器
CSS :first-letter 伪元素
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }