CSS第N个子选择器 - 样式

Question

<a class="abc">
     <span class="def">foo</span>
     bar
   </a>

我如何定位栏以使其变为粗体 - 我不能给它任何css类，尝试过第n个孩子但没有工作 - 尝试了这样的第n个孩子：但是没有工作 - 在ff上测试。

abc a:nth-child(2) {
text-weight:bold !important;
}

Answer 1

你有css规则的问题。把它写成

   .abc a:nth-child(2) {
    font-weight:bold !important;
    }

要实现您想要的效果，请将您的CSS更改为

    a.abc {
    font-weight:bold!important;
    }
.def{
    font-weight:normal!important;
    }


​

<强> See JsFiddle Demo for later

Answer 2

现在试试这个

.abc:nth-child(2) {
font-weight:bold !important;
}

的 Demo 的

Answer 3

你可以做一个技巧来做到这一点。

.abc
{
  font-weight:bold;
}
.def{

font-weight:normal;
}

<强> HTML

<a class="abc">
     <span class="def">foo</span>
     bar
</a>

选中此FIDDLE

Answer 4

当您使用nth-child css定位时，您必须将条形文本放在span coz中，您必须显示相同的标记我创建了两个示例，请检查此小提琴http://jsfiddle.net/sarfarazdesigner/ShRnY/

并使用以下代码

.abc :nth-child(2) {
    font-weight:bold;
}

<a class="abc">
     <span class="def">foo</span>
     <span>bar</span>
   </a>​