伪类: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...

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

1.你定死表格的宽度,即给表格一个宽度值(是数值,不是百分比)    2.强制不换行 div{ //white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本...

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

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

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

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

关于nth-child()伪类选择器选取元素设置transform样式但是无法通过hover改变transform的问题

欢迎来到Altaba的博客  2017年5月27日22:56:46 不多说,直接上问题代码 HTML部分: 鸽子 王阳阳毕设 ...

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

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

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

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

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

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

CSS3伪类选择器nth-child和nth-of-type浅析

1. nth-child定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 n 个子元素,不论元素的类型。n 可以是数字、关键词或公式。① n为数字时,n为大于0的整数.box :n...

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

css table tr
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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