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

【问题标题】：How can I set a css class to all child elements? (Angular 6, Ngx Bootstrap)如何为所有子元素设置一个 CSS 类？（Angular 6，Ngx 引导程序）
【发布时间】：2019-03-01 09:20:54
【问题描述】：

我有一个这样的 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 错了吗？提前致谢。

【问题讨论】：

您确定列表元素的 css 没有被其他地方的其他 css 覆盖吗？
你在使用 Bootstrap 吗？我问是因为你有这些类：“class="nav nav-tabs"。如果你是，那么将应用 Bootstrap 框架样式，你需要相应地/正确地覆盖它们

标签： html css angular angular6 ngx-bootstrap

【解决方案1】：

此规则依赖于 DOM 结构，恰好是 TABSET.panel-mobile-navs > UL > LI：

.panel-mobile-navs > ul > li { ... }

您使用的框架可能正在注入阻止规则工作的 DOM 节点。尝试直接定位 .nav-item 类。

【讨论】：

【解决方案2】：

避免使用后代选择器，改用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 规则： example

【讨论】：

【解决方案3】：

如何使用后代组合器（.panel-mobile-navs ul li）而不是子组合器（.panel-mobile-navs > ul > li）？

有文件：

【讨论】：