求解释为什么会这样

cccc44443000 2012-01-01 06:23:57

下面是dreamweaver的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
a:link{font-size:20px;}
a:visited{color:#CCCCCC;}
a:hover{color:#00F;}
a:active{color:#00FF00;}
h1:first-child{color:red; font-size:50px;}

</style>
<body>
<a href="http://www.baidu.com">百度搜索</a>
<h1>www.baidu.com百度搜索</h1>
<h1>百度搜索www.baidu.com</h1>
</body>
</html>
我这样写的时候h1:first-child{color:red; font-size:50px;}不起作用,但是我把<a href="http://www.baidu.com">百度搜索</a>给删除掉的话,h1:first-child{color:red; font-size:50px;}就能起作用,为什么会这样?

...全文

32 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

cccc44443000 2012-01-01

打赏
举报

我理解了,是我将first-child理解错误了,
X:first-child的理解应该是所有页面标签中,，如果它的第一个子签是X那么就对它应用样式,不是第一个子签则不应用样式
我之前理解成为所有页面标签中第一个X标签应用对应的样式了
呵呵,谢谢大家
P2277的解释比较好

p2227 2012-01-01

打赏
举报

我这边查得的资料是这样的

结构性伪类选择符 E:first-child 版本：CSS2
语法：
E:first-child{ sRules }
说明：
匹配父元素的第一个子元素E。
要使该属性生效，E对象必须是某个对象的子元素。
这里可能存在误解：
示例代码：

<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}，而不是ul:first-child{sRules}。其它相关的伪类都如此。

所以删除a后，h1就是body的第一个子元素了，才符合选择器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style type="text/css">

a:link{font-size:20px;}

a:visited{color:#CCCCCC;}

a:hover{color:#00F;}

a:active{color:#00FF00;}

h1:first-child{color:red; font-size:50px;}



</style>

<body>

<a href="http://www.baidu.com">百度搜索</a>

<div>

<h1>www.baidu.com百度搜索</h1>

<h1>百度搜索www.baidu.com</h1>

</div>

</body>

</html>