Question

我从这行代码中生成了一个sub属性的元素[sub]

      <li [displayMode]="displayMode" template-menu-item style="cursor: pointer" [routerLink]="['/request/checkoutReview']" icon="fa-shopping-cart" name="Checkout" id="checkout-menu-icon" [sub]="(products$ | async)?.length"></li>

我正在尝试设置由于对齐方式设置为sub而生成的bottom: -.25em;元素的样式

我正在尝试为其设置自己的样式，但是没有一种样式被应用。

    #checkout-menu-icon > a > div > sub {
        top: 0 !important;
        left: 3px !important;
    }

和

    #checkout-menu-icon > a > div > .ng-star-inserted {
        top: 0 !important;
        left: 3px !important;
    }

如何将样式应用于下面的sub元素？

     <li id="checkout-menu-icon" name="Checkout" style="cursor: pointer" template-menu-item="" _nghost-c13="" tabindex="0" ng-reflect-router-link="/request/checkoutReview" ng-reflect-icon="fa-shopping-cart" ng-reflect-name="Checkout" ng-reflect-sub="1" ng-reflect-display-mode="0" class="ng-star-inserted">
          <a _ngcontent-c13="" routerlinkactive="active" ng-reflect-router-link="/request/checkoutReview" ng-reflect-router-link-active="active" href="/request/checkoutReview">
                           <!--bindings={
                              "ng-reflect-ng-if": "true"
                            }-->
           <span _ngcontent-c13="" class="ng-star-inserted" style="color: rgb(69, 69, 69);">
           <i _ngcontent-c13="" class="fa fa-2x fa-shopping-cart" ng-reflect-klass="fa fa-2x" ng-reflect-ng-class="fa-shopping-cart"></i></span>

           <div _ngcontent-c13="" class="tabName" style="color: rgb(69, 69, 69);">Checkout
                            <!--bindings={
                            "ng-reflect-ng-if": "1"
                            }-->
               <sub _ngcontent-c13="" class="ng-star-inserted">1</sub>
           </div>
         </a>
    </li>

Answer 1

尝试删除添加的样式，然后添加以下样式：-

fred[:person]&.key?(:children) //=>true
slate[:person]&.key?(:children)

Answer 2

这个问题与Angular处理view encapsulation的方式有关。如果您将样式添加到应该解决问题的主 styles.css 文件中。

Angular：如何设置动态生成的HTML的样式？

2 个答案: