Javascript AngularJS 1.5组件样式不是'；不适用

有几次我注意到为AngularJS 1.5组件添加的样式并没有真正应用，现在我又遇到了这种情况，无法用谷歌搜索它发生的原因。情况：我有视图

home

和组件

bt表

简化模板：

<section id="home">
    <bt-table data="hc.tableData" options="hc.tableOptions"></bt-table>
</section>

然后我看到它没有被应用，转到devtools，看到样式实际上是由浏览器解析的：

同样有趣的是：当我将组件悬停在元素中时，我看到：

请注意，即使元素大小非零，它也不会像正常情况一样以蓝色高亮显示

那么，为什么它能如此有效呢？这与AngularJS模板编译过程有关（我猜是这样），还是有其他原因

UPD:如果我为元素设置

border:10px纯红

，则渲染：

UPD:bt表中的标记如下所示：

<section id="table">
    <div class="panel panel-default">
        <div class="panel-heading">Table</div>
        <table st-table="tc.data.data" class="table table-striped">

            <!-- HEADERS, SORTING AND SEARCHBARS -->
            <thead>
            <tr>
                <th ng-repeat="header in tc.data.headers" st-sort="{{header.sortsearch}}" ng-bind="header.title"></th>
            </tr>
            <tr ng-if="tc.options.search === 'every'">
                <th ng-repeat="header in tc.data.headers">
                    <input st-search="{{header.sortsearch}}" placeholder="search for {{header.title.toLowerCase()}}" class="input-sm form-control" type="search"/>
                </th>
            </tr>
            <tr ng-if="tc.options.search === 'all'">
                <th>
                    <input st-search placeholder="search in all columns" class="input-sm form-control" type="search"/>
                </th>
            </tr>
            </thead>

            <!-- CONTENT -->
            <tbody>
            <tr ng-repeat="row in tc.data.data">
                <td ng-repeat="column in row" ng-bind="column"></td>
            </tr>
            </tbody>

            <!-- PAGINATION -->
            <tfoot ng-if="tc.options.pagination">
            <tr ng-if="tc.tdata.options.pagination.type === 'buttons'">
                <td colspan="5" class="text-right">
                    <div st-pagination="" st-items-by-page="tc.tdata.options.pagination.itemsByPage" class="no-margin"></div>
                </td>
            </tr>
            <tr ng-if="tc.options.pagination.type === 'input'">
                <td colspan="5" class="text-right">
                    <div st-pagination="" st-items-by-page="tc.options.pagination.itemsByPage" st-template="components/l-table/custom-pagination.custom.html" class="no-margin"></div>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</section>

桌子

这可能是因为您的目标是自定义元素，而chrome将其设置为

显示：内联

。两种选择：

---

选项1：添加“块”样式

---

选项2使用替换（我会这么做）。您可以在指令上设置

replace:true

，然后针对不是自定义元素的节的第一个子节，该节将显示为

block

：

<section id="table">

然后将样式更新为：

#home .bt-table{
    margin: 0 0 30px 0
}

---

仅仅是一张照片是帮不了你的。需要某种类型的代码来显示您的问题。给我们看照片后面的标记。@尼克斯对不起，忘了给它加标签，所以它被转义了，现在被编辑了。你试过在它周围加一个简单的“彩色”边框吗。因为没有任何东西会阻止应用您的样式。@Nix尝试了，更新了原始样式post@Nix谢谢，顺便说一句，它表明，样式确实适用，只是奇怪的方式非常感谢，这是chrome默认显示：内联样式

<section id="table">

<section class="btn-table">

#home .bt-table{
    margin: 0 0 30px 0
}