伪类:first-child的测试

原创 2007年09月29日 09:42:00
first-child其实是一个很好的东西,只是IE一直不支持,不知道是出于什么考虑的,有点无聊。 

还记得极遥远的时候,这个问题是xiaoming同学问的。如何在不动原来的代码情况下,只弄个外部css来改变某块东东里面的第一个元素的样式。

很自然,这个问题一下就会让人想到用:first-child,只不过万恶的ie不支持,只能用js或expression了。

由于FF,Opera,Mozilla等浏览器支持:first-child,所以只要给ie写个hack就行了。这里只简单做一下:first-child的效果。

[演示地址:http://www.doyoe.com/model/xhtmlcss/style/firstchild.htm

XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>firstChild</title>
<style type="text/css">
.test a:first-child {color:#f00;}
</style>
<!--[if IE]>
<style type="text/css">
.test {start:expression(this.getElementsByTagName("a")[0].style.color="#ff0000")}
</style>
<![endif]-->
</head>
<body>
<div class="test">
 <a href="#">test</a>
 <a href="#">test</a>
 <a href="#">test</a>
</div>
</body>
</html>

ie又折腾了我一次,让我多写了好几行代码。 

 

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

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

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

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

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

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

:first-child 的坑(first-child的伪类选择器不起作用)

比如下面的代码,刚开始不知为什么 :first-child的伪类选择器不起作用,而last-child却有作用 尊敬的用户您好,您的入职流程需要按照如下步骤进行操作,了解流程后即可前...

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

开始我是有找下解决的方法。 一般last-child都是用在菜单或者列表用边框分隔的时候,把最后面一个border的设定去掉。 一种方法是给最后一项添加一个class,例如.last-chil...

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

CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器...
  • wstwlk
  • wstwlk
  • 2013年04月02日 08:58
  • 220

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

/* 伪类: :link :hover :active :visited 伪类的特点:以 :开头 */ .box{ ...

【CSS3】结构性伪类选择器—nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even)...

强大的nth-child(n)伪类选择器玩法 企

写在前面的戏:   最近参加了度娘前端IFE的春季班,刷任务,百度真是有营销头脑,让咱们这帮未来的技术狂人为他到处打广告(我可不去哪),其中做的几个任务中有几个以前没有用到的东西, 也算是有些许收...

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

css3的强大,让人惊叹,今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”实现奇偶行显示不同样式,具体的详细示例可以参考下文,希望对大家有所帮助css3的强大,让人惊叹,人...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:伪类:first-child的测试
举报原因:
原因补充:

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