Question

所以这是我用来设计面包屑样式的代码。

.breadcrumbs-one{
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
  width: 100%;
  margin-top:15px;
  margin-left:-20px;
}

.breadcrumbs-one li{
  float: left;
}

.breadcrumbs-one a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #fff;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);  
}

.breadcrumbs-one li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}

.breadcrumbs-one a:hover{
  background: #fff;
}

.breadcrumbs-one a::after,
.breadcrumbs-one a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}

.breadcrumbs-one a::after{ 
  z-index: 2;
  border-left-color: #ddd;  
}

.breadcrumbs-one a::before{
  border-left-color: #ccc;  
  z-index: 1; 
}

.breadcrumbs-one a:hover::after{
  border-left-color: #fff;
}

.breadcrumbs-one .current,
.breadcrumbs-one .current:hover{
  font-weight: bold;
  background: none;
}

.breadcrumbs-one .current::after,
.breadcrumbs-one .current::before{
  content: normal;  
}

我是从这里得到的：http://www.red-team-design.com/css3-breadcrumbs

如何修改代码，以便CSS三角形不会附加到最后一个痕迹？

因此，如果有一个面包屑，我不会在它的末尾添加一个三角形。

同样，如果有两个面包屑，我不希望在第二个面包屑的末尾有一个三角形。

依此类推。

Answer 1

您可以使用last-child选择器选择最后一个li元素。之后，您之前和之后删除pseudo classes的内容。

#breadcrumbs-one li:last-child a::before,
#breadcrumbs-one li:last-child a::after
{
  content: normal;
}

在此 example 中，您选择了第二个链接，您可以看到最后一个链接后面没有箭头。

如果要选择特定的索引元素，例如第三个li元素。您可以使用选择器nth-child(index nummer)。例如，如果你想选择第三个li元素你可以做li：nth-child（3）。

在这种情况下：

#breadcrumbs-one li:nth-child(3) a::after,
#breadcrumbs-one li:nth-child(3) a::before
{
 content: normal;  
}

<强> Fiddle update

<小时/> 的更新

现在，当您使用最后一个子选择器并且您有一个元素时，该元素将被视为最后一个元素。但是你真的希望那个元素不是最后的idicator。所以你必须使用另一个idicator。首先，一个元素是第一个和最后一个元素。您已经定义了last-child，因此您可以轻松定义first-child元素。

#breadcrumbs-one li:first-child a::after, #breadcrumbs-one li:first-child a::before{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; }

您希望此代码的优先级高于last-child。现在您可以使用css的!improtant标记，但我强烈建议您不要不惜一切代价使用此标记。为代码提供更多优先级的一种方法是使选择器更具体。在这种情况下，＃breadcrumbs-one实际上是一个ul元素，所以在它之前放置一个ul使它更具体：

ul#breadcrumbs-one li:first-child a::after, ul#breadcrumbs-one li:first-child a::before{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; }

现在，如果您不想创建更具体的选择器，则始终可以将此代码放在最后一个子选择器代码之后。 Css将从上到下读取顺序，因此您希望在重叠代码之后重写重叠代码。 此顺序仅在选择器相同时使用。
但是我选择了更具体路径的方法，这样放置代码的位置并不重要。

的 jsFiddle
<小时/> 让我们添加另一个更新

首先，我建议你了解会发生什么。 Here 是箭头创建方式的一个小例子。使用这个:: before和:: after伪类也可以使用 Here 一些关于它的信息。

我建议你在阅读我的答案之前先自己尝试一下。

每个'crumb'由条形图定义，文本，箭头旁边的箭头和箭头的边框。

那么psuedo类正在生成什么？

简单地说，:: after伪类生成它自己的箭头，而:: before伪类生成箭头的边框。现在你只想改变箭头颜色（你可以自己改变边框）。现在，如果您已经阅读了边界技巧，您可能会注意到这是仅使用边框创建的。这样你不想要使用background-color但是改变边框颜色。

您可以使用：border: 1px solid white;更改边框颜色，但您只想更改颜色。你现在的方式也是宽度和边框风格。使用border-color，您只能更改颜色。更具体地说：border-left-color: white;。

所以会这样：

#breadcrumbs-one .current::after { border-left-color: white; }

记得我之前说过的话？更具体的选择器将覆盖其他css代码。在这种情况下，类更具体地作为元素（锚）。

现在您只更改了箭头颜色。让我们改变吧台本身的背景。

已经有一个定义.current元素的css代码：

#breadcrumbs-one .current, #breadcrumbs-one .current:hover{ font-weight: bold; }

只需更改元素的背景，即：

#breadcrumbs-one .current, #breadcrumbs-one .current:hover{ font-weight: bold; background: white; }

你去了，默认情况下.current元素是白色的！

<强> jsFiddle

Answer 2

除非我错过了问题的重点，否则不是。即使在您引用的页面上，它也会显示列表中的最后一项具有不同的CSS类

<ul id="breadcrumbs-one">
    <li><a href="">Lorem ipsum</a></li>
    <li><a href="">Vivamus nisi eros</a></li>
    <li><a href="">Nulla sed lorem risus</a></li>
    <li><a href="">Nam iaculis commodo</a></li>
    <li><a href="" class="current">Current crumb</a></li>
</ul>

因此，请确保您的class="current"位于列表中的最后一项。

如果这是动态的，那么可以使用服务器端代码或可能是某些JavaScript

来完成

使用CSS设计面包屑样式

2 个答案: