0

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

.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 三角形不附加到最后一个面包屑？

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

同样，如果有两个面包屑，我不想在第二个面包屑的末尾出现三角形。

等等等等。

4

2 回答 2

2

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

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

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

如果要选择特定的索引元素，例如第三个 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;  
}

小提琴更新

更新

现在，当您使用 last-child 选择器并且您有一个元素时，该元素将被视为最后一个元素。但是您实际上希望该元素不具有最后一个指示符。因此，您必须为此使用其他指示符。首先，一个元素是第一个和最后一个。您已经定义了 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;
}

您希望此代码比最后一个孩子具有更高的优先级。现在你可以使用 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

让我们添加另一个更新

首先，我建议您了解会发生什么。这是一个如何创建箭头的小例子。有了这个 ::before 和 ::after 伪类也被使用，这里有一些关于它的更多信息。

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

每个“面包屑”由带有文本的条、旁边的箭头和箭头的边框定义。

那么什么伪类正在生成什么？

很简单， ::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

于 2013-10-04T09:23:18.747 回答
0

除非我错过了问题的重点，否则不是。即使在您引用的页面上，它也显示列表中的最后一项具有不同的 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 来完成

于 2013-10-04T09:24:36.533 回答