Question

我正在尝试使用CSS中的before / after实现带三角形的面包屑，如本教程所示：

http://css-tricks.com/triangle-breadcrumbs/

相关摘要：

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
</ul>

.breadcrumb li a {
    color: white;
    text-decoration: none; 
    padding: 10px 0 10px 65px;
    background: hsla(34,85%,35%,1); 
    position: relative; 
    display: block;
    float: left;
}

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

但是，我将它用作定向流程，例如：

Main_Category＆gt;＆gt; Sub_Category＆gt;＆gt;细节

此流程从Main_Category突出显示，其他两个部分变暗，并且您可以从中选择。在选择时，Sub_Category会突出显示，另一个会弹出。

我的问题是如果它们是伪元素，如何更改前/后边框颜色？所以从教程中，我认为可以在主要部分做到这一点：

<li><a href="#" ng-style="background: {{color}}">Home</a></li>

但是我无法在之前/之后设置ng-style，并且三角形颜色最终没有变化。

Answer 1

如果我理解你的问题，你想知道如何使用angular指令来动态设置前/后伪标签的样式。

不使用ng-style，而是使用ng-class附加一个类，该类将确定要使用的伪类之前/之后。

<ul class="breadcrumb">
     <li><a href="#" ng-class="someBooleanInScope? 'color-0' : 'color-1'">Home</a></li>
</ul>

在CSS中：

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

.breadcrumb li a.color-0:after {
    background: black;
}

.breadcrumb li a.color-1:after {
    background: blue;
}

Answer 2

ng-class应该适用于你想要做的事情。

 <li><a href="#" ng-style="ng-class="{beforeCSS: amIBeforeElement()}"">Home</a></li>

粗略代码example

Answer 3

我会避免在这种情况下使用ng-style你可能会发现使用ng-class更容易并且应用不同的类，这将允许你将所有CSS保存在一个地方而不是覆盖HTML。

只需将您的代码更改为：

<li><a href="#" ng-class="{ 'breadcrumb-color': subCategory }">Home</a></li>

其中subCategory应该是一个布尔值，点击你设置subCategory然后它会将breadcrumb-color添加为类值，你应该得到这样的结果：

<li><a href="#" class="breadcrumb-color">Home</a></li>

一些示例css，现在您可以根据需要设置之前和之后：

.breadcrumb-color li a {
    background: red;
}

.breadcrumb-color li a:after { 
    background: red;
}

如何改变Angular中之前/之后的样式？

3 个答案: