时间戳

首页 > 解决方案 > 如何为所有子元素设置一个 CSS 类？（Angular 6，Ngx 引导程序）

html - 如何为所有子元素设置一个 CSS 类？（Angular 6，Ngx 引导程序）

问题描述

我有一个这样的 CSS 类：

.panel-mobile-navs > ul > li {
 width:100%
}

在 HTML 上，我将 Ngx-bootstrap 用于一组选项卡：

<tabset class="panel-mobile-navs" > ... </tabset>

所以我试图改变其中元素的css，当页面加载时，在“tabset”元素内生成以下HTML：

<ul class="nav nav-tabs" ng-reflect-klass="nav" ng-reflect-ng-class="[object 
Object]">
...
<li class="nav-item" ng-reflect-ng-class="nav-item,"> ... </li>

</ul>

但是我做的类，不适用于 ul 和 li 元素，我做 CSS 错了吗？提前致谢。

标签： htmlcssangularangular6ngx-bootstrap

解决方案

避免使用后代选择器，class name而是使用它，它被认为更高效。根据您的标记，这样的事情可能会起作用：

// SCSS
.panel-mobile-navs {
    .nav-tabs {
        // styling for ul here
        .nav-item {
            // styling for li here
        }
    }
}

// CSS
.panel-mobile-navs .nav-tabs {
    // styling for ul here
}
.panel-mobile-navs .nav-item {
    // styling for li here
}

确保检查呈现的元素以查看是否加载了 css 规则： 示例

推荐阅读