css - 如何使 Angular2 "deep"css 类优先？

Question

在我的顶级组件的样式 block 中，我定义了一个 /deep/ CSS 类，它为将出现在其 ng-content 中的任何元素设置边距。我怎样才能使该 css 类优先 - 即使子组件应用其自己的定义了不同边距的 css 类。

例如:

父组件.ts:

@Component({
    selector: 'my-parent',
    styles: [`
        /deep/ .child-item { /* I WANT THIS TO TAKE PRECEDENCE */
            margin-right: 10px;
            margin-left: 10px;
        }
    `],
    template: `
        <div>
            <ng-content></ng-content>
        <div>
    `
})
export class ParentComponent {}

子组件.ts

@Component({
    selector: 'my-child',
    styles: [`
        .less-important-class { /* THESE MARGINS SHOULD BE IGNORED IN CONFLICTS */
            margin-right: 5px;
            margin-left: 5px;
            background-color: rgba(255, 0, 0, 1.0);
        }
    `],
    template: `
        <button type="button" class="less-important-class child-item">My Little Button</button>
    `
})
export class ChildComponent {}

我认为，由于 child-item 首先出现在编译的样式表中，因此 less-important-class 具有更高的 css 特异性，并且在两个类之间的任何冲突中胜出。我怎样才能给子项更高的优先级？

Answer 1

/deep/用于覆盖 parent 的风格所以说你想改变 parent 的 div 的边距你可以使用/deep/{margin: **px}

据我所知，当您不希望父组件干扰子组件的样式时，您会在子组件中定义样式。如果您希望父级样式优先，那么我会说不要在子级中定义这些样式。这意味着在您的情况下，不要在子组件中定义的样式中指定边距。

另一种方法是不要在 Parent 或 child 中定义这些样式，而是创建一个新的全局样式表并只添加全局样式当然你需要在 index.html 中引用该样式表所以在你的情况下我会删除边距parent 和 child 的 styles 添加到 styles.css 中，在 index.html 中引用 styles.css