Question

我正在尝试将css应用于.Outer中的第一个A元素，

 .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>

Answer 1

这是因为<a>不是第一个孩子，<img/>是。您要找的是.Outer > a:first-of-type或.Outer > a:nth-child(2)。不要让这些“更高级”的选择器在所有浏览器中都不起作用* coughIEcough *

Answer 2

没有角括号试试吧。此外，所有浏览器都无法识别:first-child伪类。

您的CSS也可能被现有规则覆盖。在firefox中使用firebug来确切了解正在应用的样式。

Answer 3

您正在做的事情只有在您的div.Outer的第一个孩子是一个元素时才会起作用。 :first-child完全按照它所说的做，它只匹配一个元素，如果该元素是某个元素的第一个孩子。

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

Answer 4

因为第一个孩子是图像，所以这将起作用：

<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>

Answer 5

^{免责声明：抱歉，我不会对此进行测试，只是提出一些想法。}

由于图像实际上是第一个元素，如果您还没有想到，这里有一个替代的简单想法：

<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源码是如何完成的。它很顺利。

使用css子选择器

5 个答案: