css中的伪类 之 first-child

原创 2012年03月28日 13:29:36

昨天在看代码时,看到了下面这段代码

 

body:last-child {

    font: 64%/133.5% "MS Pゴシック", sans-serif;

}

 

这里的last-child是css中伪类

-----------------------------------------------

下面举一段代码作为例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<style type="text/css">
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;color:red}
</style>
</head>

<body>
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

<p><b>注释:</b>必须声明 DOCTYPE,这样 :first-child 才能在 IE 中生效。</p>
</body>

</html>


效果

----------------------------------------------------------------------------------

These are the necessary steps:
 •INTERT KEY
 •Turn key clockwise
 •Push accelerator
 
Do not push the brake at the same time as the accelerator.
 
注释:必须声明 DOCTYPE,这样 :first-child 才能在 IE 中生效。

-------------------------------------------------------------------------------------

 

 

 

 

微信小程序学习笔记(8)--------样式基础

小程序样式基础
  • zsp45212
  • zsp45212
  • 2016年12月13日 21:10
  • 4669

CSS伪类first-letter在Firefox中呈现的问题

今天又碰到个CSS样式问题,对于商品的价格,一般我们设计的时候,如下图 货币符号一般写小一些,因为关注的重点是价格,货币单位一般情况下会以本国单位为主,所以弱化的¥符号可以满足这样的体验。 如...
  • wanglei19830426
  • wanglei19830426
  • 2013年12月04日 00:41
  • 1054

CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式

css table tr
  • u012132129
  • u012132129
  • 2015年11月03日 13:56
  • 10057

关于CSS伪类first-child的深入理解

关于CSS伪类first-child的深入理解在CSS(CSS3)中,有一种选择器很特殊,那就是伪类,关于伪类有很多,这里详细分析其中的一种:first-child。具体书写格式如下: elemen...
  • mirro81
  • mirro81
  • 2017年07月21日 23:43
  • 97

CSS3:nth-child()伪类选择器,奇偶数行自定义样式first-child

Table表格奇偶数行定义样式: CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年,但是目...
  • jinkingliao
  • jinkingliao
  • 2015年11月20日 11:55
  • 550

那些年踩过的坑之:first-child伪类选择器

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。——w3school 嗯,乍一看好像说的不是很明白,因此这个选择器很容易让人误解,通常会有两种误解: 误解一:认为...
  • mingqingyuefeng
  • mingqingyuefeng
  • 2017年04月28日 16:56
  • 143

奇偶行显示不同样式操作,CSS3 :nth-child()伪类选择器

原文地址:http://blog.phpok.com/archives/202/ css3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支...
  • l863784757
  • l863784757
  • 2013年11月04日 16:22
  • 2590

CSS3选择器之:nth-child()伪类选择器详解

1、语法:nth-child(an+b)  注意: (an+b)不能写成(b+an); 描述:伪类:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文,很可能会让人头晕,再...
  • u013084331
  • u013084331
  • 2016年03月10日 14:59
  • 839

css3-属性、伪类、nth-child选择器

/* 伪类: :link :hover :active :visited 伪类的特点:以 :开头 */ .box{ ...
  • gyq04551
  • gyq04551
  • 2016年11月21日 20:32
  • 204

在IE678下解决伪类last-child的css2方法

开始我是有找下解决的方法。 一般last-child都是用在菜单或者列表用边框分隔的时候,把最后面一个border的设定去掉。 一种方法是给最后一项添加一个class,例如.last-chil...
  • xiebaochun
  • xiebaochun
  • 2015年07月30日 18:22
  • 3665
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css中的伪类 之 first-child
举报原因:
原因补充:

(最多只允许输入30个字)