=====

Question

我在CSS任务中乱跑，所以请允许我为这个非常具体的问题寻求帮助。

有一个来自CMS的HTML面包屑（即外部系统，我无法改变），我想用它来设计。

它应该是这样的：

T1 BOLD ＆gt; T2 BOLD 当它是最后一次时，NORMAL当它不是最后一次＆gt; T3 NORMAL如果存在

因此面包屑可以是2个元素或3个，但最后一个元素必须始终具有font-weight：normal。

HTML看起来像这样（小心：遗憾的是我不能改变这个奇怪的HTML）：

<div class="breadcrumb">
    <span> 
        <a href="#"> 
            <span>T1 bold</span>
        </a> ›
    </span> 
    <a href="/"> 
        <span>T2 should be bold, because it's not last</span>
    </a> › 
    <span>T3 normal</span>
</div>

<div class="breadcrumb">
    <span> 
        <a href="#"> 
            <span>T1 bold</span>
        </a> ›
    </span> 
    <a href="/">
        <span>T2 should be normal, because it's last</span>
    </a>
</div>

我尝试过这个CSS，但它不能按照我想要的方式工作。

.breadcrumb>span:last-child, #breadcrumb>a:last-child {
    font-weight: normal !important;
}

.breadcrumb>a span {
    font-weight: bold;
}

JSFiddle在这里：https://jsfiddle.net/uk4q2cvu/

问题是：什么css会导致面包屑中的所有项目都变粗，除了最后一项 - 应该是font-weight normal

非常感谢任何帮助。

由于哈德

Answer 1

Updated Fiddle

:last-child完成工作，无论是跨度还是a：

.breadcrumb > * {
    font-weight: bold;
}

.breadcrumb > *:last-child {
    font-weight: normal;
}

Answer 2

以下是您的示例的简洁更新：

＆＃13;

.breadcrumb {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.breadcrumb > li {
  display: inline;
}

.breadcrumb > li:not(:last-child) {
  font-weight: bold;
}

.breadcrumb > li:not(:last-child):after {
  content: " › ";
  display: inline;
}

＆＃13;

<ul class="breadcrumb">
  <li><a href="#">T1 Bold</a></li>
  <li><a href="#">T2 Bold</a></li>
  <li>T3 Normal</li>
</ul>

<ul class="breadcrumb">
  <li><a href="#">T1 Bold</a></li>
  <li>T2 Normal</li>
</ul>

＆＃13;

Answer 3

两条直截了当的规则：

.breadcrumb a {
font-weight: bold;
}

.breadcrumb a:last-of-type {
font-weight: normal;
}

第一条规则强调所有.breadcrumb锚点。

第二条规则在每个.breadcrumb系列中展开最后一个锚点。

=====

更好的是，这是一条达到相同结果的规则：

.breadcrumb a:nth-of-type(n-1) {
font-weight: bold;
}

CSS：面包屑的样式（非常具体）

3 个答案:

=====