用css孩子选择

我想里面.Outer第一个元素应用CSS，用css孩子选择

.Outer > a:first-child {font-weight:bold}

不起作用。为什么？

<div class="Outer"> 
<img src='image123.jpg' /> 
<a href="Default.aspx?ID=4083" id="ctl00_CPH_Main_Rep_List2_ctl03_HyperLink1">John Johnsson</a> 
<a href="../Users/ViewList.aspx?module=Occupation&amp;ID=70">Doctor</a> 
<a href="../Workplaces/Default.aspx?ID=31">Mayo Clinica> 
</div>

来源

2010-03-04 David Thorisson

这是因为<a>不是第一个孩子，<img/>是。你要找的是.Outer > a:first-of-type或.Outer > a:nth-child(2)。你们不要这些“更先进的”选择并不适用于所有的浏览器工作* coughIEcough *

来源

2010-03-04 18:32:16 casraf

噢，我要么忘了或不知道那些伪类。 – Sean 2010-03-04 18:46:57

这是最好的解决方案，但它的浏览器支持很差（非IE8，FF3），所以我不得不使用其他替代方案 – 2010-03-04 18:48:18

您可以使用服务器端脚本向第一个链接添加类吗？ – casraf 2010-03-04 18:52:14

尝试没有角度支架。同样，:first-child伪类不被所有浏览器识别。

您的CSS也可能被现有规则覆盖。在Firefox中使用firebug来确切地查看正在应用的样式。

来源

2010-03-04 18:25:22 Jason

你所做的只会在你的div.Outer的第一个孩子是一个元素时才起作用。 :first-child的确如它所说的那样，它只匹配一个元素，如果该元素是某物的第一个孩子。

不幸的是，我不认为有什么办法只用CSS来选择元素的第一个匹配的子元素。

来源

2010-03-04 18:28:59 Sean

thx所有，想到一个：第一个孩子将适用于第一个A元素只... 将检查替代品！ – 2010-03-04 18:39:33

我给了你一个替代方案，查看我的答案：/ – casraf 2010-03-04 18:44:27

@henasraf：绝对检查David的答案，如果你不需要支持某些浏览器，这可能会很有用。 – Sean 2010-03-04 18:48:03

因为第一个孩子是图像，这会工作：

<div class="Outer"> 
<a href="Default.aspx?ID=4083" id="ctl00_CPH_Main_Rep_List2_ctl03_HyperLink1">John Johnsson</a> 
<a href="../Users/ViewList.aspx?module=Occupation&amp;ID=70">Doctor</a> 
<a href="../Workplaces/Default.aspx?ID=31">Mayo Clinic</a> 
</div>

来源

2010-03-04 18:33:32 heisenberg

^{免责声明：对不起，我赢了不要对此进行测试，只是抛出一些想法。}

由于图像实际上是第一要素，这里是另一种简单的想法，如果你还没有想出任何尚未：

<div class="Outer"> 
<img src='image123.jpg' /> 
</div> 
<div class="Outer"> 
<a href="Default.aspx?ID=4083" id="ctl00_CPH_Main_Rep_List2_ctl03_HyperLink1">John Johnsson</a> 
<a href="../Users/ViewList.aspx?module=Occupation&amp;ID=70">Doctor</a> 
<a href="../Workplaces/Default.aspx?ID=31">Mayo Clinica</a> 
</div>

它不应该影响img，因为它只是大胆。

另一种方法是修改只是CSS和不接触HTML：

.Outer a:first-child {font-weight:bold;}

这将影响从外每一个孩子，但我相信它会在这种情况下工作，如果没有什么更里面外。

做的最好的事情，无论是谁，会是一个不同div每个组的元素。在这种情况下，这将是这样的：

CSS

.Outer {font-size:10pt;} 
.Outer-Head {boder:0;} 
.Outer-Body {font-weight:none;} 
.Outer-First {font-weight:bold;}

HTML

<div class="Outer"> 
<div class="Outer-Head"> 
    <img src='image123.jpg' /> 
</div> 
<div class="Outer-Body"> 
    <div class="Outer-First"> 
    <a href="Default.aspx?ID=4083" id="ctl00_CPH_Main_Rep_List2_ctl03_HyperLink1">John Johnsson</a> 
    </div> 
    <a href="../Users/ViewList.aspx?module=Occupation&amp;ID=70">Doctor</a> 
    <a href="../Workplaces/Default.aspx?ID=31">Mayo Clinica</a> 
</div> 
</div>

它会给你最好的结果。只要看看StackOverflow源代码就可以了。非常流畅。

来源

2010-03-17 21:35:21 cregox

用css孩子选择

回答

相关问题