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

Posted 2023-03-05

【中文标题】如何在Angular中更改之前/之后的样式？

【英文标题】：How to change style for before/after in Angular?

【发布时间】：2014-08-21 08:15:00

【问题描述】：

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

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

相关sn-ps：

<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 >> Sub_Category >> 详情

此流程开始时 Main_Category 突出显示，其他 2 个部分变暗，您可以从中进行选择。选择时，Sub_Category 会突出显示并弹出另一个。

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

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

但是我没有地方可以为之前/之后设置 ng-style，并且三角形颜色最终保持不变。

【问题讨论】：

我想看到一个直接解决这个问题的答案。使用类并不总是合适的。例如，我可能有大量元素需要根据项目 ID 更改背景图像。

【参考方案1】：

如果我正确理解了您的问题，您想知道如何使用角度指令来动态设置之前/之后伪标签的样式。

不使用 ng-style，而是使用 ng-class 附加一个类，该类将确定使用哪个 before/after 伪类。

<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;

【讨论】：

太棒了，唯一的小改动是“背景：黑色；”到“左边框颜色：黑色；”非常感谢！

【参考方案2】：

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

只需将您的代码更改为：

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

subCategory 应该是一个布尔值，点击你设置 subCategory 然后它会添加面包屑颜色作为类值，你最终应该是这样的：

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

一些示例css，现在你可以随意设置之前和之后：

.breadcrumb-color li a 
    background: red;


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

【参考方案3】：

ng-class 应该适用于您正在尝试做的事情。

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

粗略代码example