Question

我试图设计一个被注入的元素的兄弟姐妹＆＃39;通过ng-content块。当我在css *[class*="item"]:hover + .skewer中应用此选择器时，它与组件模板中已存在的元素完美配合。当我希望选择器也可以使用传递给ng-content的元素时，就会出现问题。因为它创造了一个包装＆＃39;我传入的元素周围的div，.skewer元素不再是悬停元素的直接兄弟，因此它不会应用规则。

为了澄清我在这里尝试做的事情，这是组件模板的一小部分：

<nav id="navbar" class="navbar navbar-met fixed-top bg-faded">
    <div class="left-block">
        <!-- Framework logo -->
        <div class="navbar-square-item pointer met-blue-hover">
            <span class="met-logo-wrp">{{brandFirstLetter}}</span>
        </div>

        <!-- Concerned application initials -->
        <a class="navbar-square-item pointer met-blue-hover" *ngIf="appInitials">
            <span class="app-initials-wrp">{{appInitials}}</span>
        </a>

        <!-- The components passed to the navbar with attribute left-block-item will be rendered here -->
        <!-- Remember to use the proper element class (square or rect) -->
        <ng-content select="[left-block-item]"></ng-content>

        <!-- This is the block that contains the gradient with the inclined bars -->
        <div class="skewer"></div>
    </div>

    <div class="middle-block">
        <!-- The components passed to the navbar with attribute middle-block-item will be rendered here -->
        <!-- Remember to use the proper element class (square or rect) -->
        <ng-content select="[middle-block-item]"></ng-content>
    </div>

    <div class="right-block">
        <!-- The components passed to the navbar with attribute right-block-item will be rendered here -->
        <!-- Remember to use the proper element class (square or rect) -->
        <ng-content select="[right-block-item]"></ng-content>

        <!-- This is the block that contains the gradient with the inclined bars flipped -->
        <div class="skewer flip-horizontal last-flex-element"></div>
    </div>
</nav>

这是完整的CSS规则：

*[class*="item"]:hover + .skewer{
    background: 
    linear-gradient(
        60deg, 
        $nav-bar-item-sel-bg, 
        $nav-bar-item-sel-bg 38%, 
        $palette-white 40%, 
        $palette-white 47%, 
        $nav-bar-item-bg 49%,
        $nav-bar-item-bg 58%,
        $palette-white 60%,
        $palette-white);
}

最后＆＃39;外部＆＃39;使用导航组件的组件：

<sfw-navbar [appInitials]="'Pt'">

    <div left-block-item>
        <div class="navbar-square-item met-blue-hover">
            <span class="mdi mdi-magnify navbar-icon"></span>
        </div>
    </div>

</sfw-navbar>

以这种方式传递HTML元素时，就会出现问题。

即使是关于搜索内容的建议也会非常有帮助，我已经搜索了很多内容，但我无法再根据搜索内容进行搜索了。转运选项＆＃39;以及随附的所有组合...

此外，如果问题不是100％明确，我建议你告诉我，这次我完全失明了这需要＆＃39;

感谢任何帮助！

避免使用ng-content包装器Angular2

0 个答案: