打印

求教关于CSS的伪类first-child

sunhy [楼主]

中级会员

帖子: 138
体力: 465
威望: 0
离线: 45 天

1^# 大中小发表于 2004-7-29 15:10

从CSS教程里看到first-child，意为设置 E 的第一个子对象的样式。

如：
p a:first-child { color: green }
table td:first-child { width:200px; }

但我用了一下，没反应，请高人给个例子！

砖头网

TOP

做西部数码代理.Cn1元国际45元 | IT专家提醒您此帖已被关注

cloudchen

金牌会员

帖子: 1322
体力: 4785
威望: 9
离线: 25 天

2^# 大中小发表于 2004-7-29 15:21

ie不支持，用mozilla

TOP

【美橙超级G空间】688元绑定10个子目录

sunhy [楼主]

中级会员

帖子: 138
体力: 465
威望: 0
离线: 45 天

3^# 大中小发表于 2004-7-29 15:25

哦，多谢。mozilla？第一次听到，很少有人用的浏览器吧？

砖头网

TOP

请大家尊重和保护奥运知识产权。

Amyni

初级会员

帖子: 92
体力: 197
威望: 0
当前: 北京海淀区
离线: 64 天

4^# 大中小发表于 2008-4-10 18:17

mozilla也不行...

提示：您可以先修改部分代码再运行

[ 本帖最后由 Amyni 于 2008-4-10 18:27 编辑 ]

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

expression

高级会员

帖子: 904
体力: 717
威望: 0
离线: 2 天

5^# 大中小发表于 2008-4-10 18:22

:first-child版本：CSS2　兼容性：NONE

语法：

Selector1 Selector2 : first-child { sRules }

说明：

设置对象（Selector1）的第一个子对象（Selector2）的样式表属性。
目前IE5.5尚不支持此伪类。

示例：

p a:first-child { color: green }
table td:first-child { width:200px; }

苏沈小雨制作·保留所有权利
©2001 rain1977.comer . All rights reserved . Terms of Use .

彳亍日寺米青女少言亥言兑金童女子

TOP

Amyni

初级会员

帖子: 92
体力: 197
威望: 0
当前: 北京海淀区
离线: 64 天

6^# 大中小发表于 2008-4-10 18:29

expression,你意思是现在不支持吗?

TOP

expression

高级会员

帖子: 904
体力: 717
威望: 0
离线: 2 天

7^# 大中小发表于 2008-4-10 18:45

html:first-child IE7跟firefox都不认识吗？有的浏览器是那样笨。
2007-3-18 下午 - Web开发 - CSS - Firefox - IE7 - 浏览器

昨晚在CSDN无意中看到这个

html:first-child>*+body {...}测试页面，解读一下：
html:first-child就是html 自己
html:first-child>* 就是html下子一级的所有,可以是head
html:first-child>*+body 就是可以head后面的body

这个选择符FF2不认，IE7也不认，Opera跟Safari可以，一开始还以为FF下的html跟body里还有层什么，FF的html下有别的东西很久前的事了，比如在本站按下中键，代码在后面。

后来又测试了，原来是不认识 html:first-child，~_~ 真笨，不知道人家是不是故意的。不过不认识也好，可以拿来当filter用，过滤FF的方式其实已经很多了，比如：

:root Selectors{}/*不过这个Netscape也认识*/
@-moz-document url("loaoao.com") {
Selectors{ ... !important}
}/* 这个是FF特有的，常常给我用来过滤广告 */ 不过这个比较特别，据不科学的说法，FF3是通过Acid2测试的，对CSS的支持变化应该不小，到时也许又会有N多问题会出现，得有区分Firefox不同版本的，这个就有作用了，区分FF1.5跟FF2的方式我还没找到，谁知道跟我说。

彳亍日寺米青女少言亥言兑金童女子

TOP

Amyni

初级会员

帖子: 92
体力: 197
威望: 0
当前: 北京海淀区
离线: 64 天

8^# 大中小发表于 2008-4-10 19:08

expression,你意思是现在不支持对吧?我好初级的,你说的我还理解不了,反正就是:first-child这个伪类很多浏览器都不支持对不?

TOP

Lion5859

高级会员

帖子: 252
体力: 546
威望: 0
当前: 广东东莞
离线: 25 天

9^# 大中小发表于 2008-4-10 19:38

FF及IE7都支持

提示：您可以先修改部分代码再运行

TOP

expression

高级会员

帖子: 904
体力: 717
威望: 0
离线: 2 天

10^# 大中小发表于 2008-4-10 19:45

你用了这个样式：
a:first-child em{
font-weight:bolder;
color:fuchsia
}
但IE7下只看到<em></em>(字的强调)效果，没有看到
font-weight:bolder;
color:fuchsia
效果

彳亍日寺米青女少言亥言兑金童女子

TOP

Amyni

初级会员

帖子: 92
体力: 197
威望: 0
当前: 北京海淀区
离线: 64 天

11^# 大中小发表于 2008-4-11 10:34

谢谢Lion5859,完全明白啦!原来a标记第一个下面的子元素要结束才会生效.

TOP

Amyni

初级会员

帖子: 92
体力: 197
威望: 0
当前: 北京海淀区
离线: 64 天

12^# 大中小发表于 2008-4-11 10:43

是不是可以这样理解,根据W3c的数据http://www.w3school.com.cn/css/css_pseudo_classes.asp(最下方)
:first-child属于css2,ie基本不支持?

TOP

k236740

蓝星国度

中级会员

帖子: 235
体力: 377
威望: 28
当前: 台湾台中
离线: 2 天

专长 网页设计,UI,前端制作

13^# 大中小发表于 2008-4-11 11:03

p裡面有兩個em，但只有第一個受到控制。

在同層級的子對象中，若有數個一樣的元素，使用:first-child來控制第一個子對象，其餘子對象將不受控制。

复制内容到剪贴板

代码:

p em:first-child

提示：您可以先修改部分代码再运行

在網頁設計的領域裡~沒有做不到~只有想不到

TOP

Amyni

初级会员

帖子: 92
体力: 197
威望: 0
当前: 北京海淀区
离线: 64 天

14^# 大中小发表于 2008-4-11 13:29

k236740,你把 k236740:first-child伪类用在em的后面了,而我实际上是用在了你例子中的p后面,所以需要将第一个p结束,才能实现伪类的应用.

TOP

wqyz

区区

中级会员

帖子: 115
体力: 237
威望: 0
当前: 浙江杭州
离线: 5 天

15^# 大中小发表于 2008-7-1 11:15

兼容IE、FF

提示：您可以先修改部分代码再运行

博客地址：http://www.wqyzouou.cn

TOP