Question

假设我有以下HTML。有没有办法阻止背景颜色级联到内表？ I.E。完全保留HTML，只修改CSS类，我可以实现这个目标：

<!DOCTYPE html>
<html>
<style>
.myClass table{
    background-color:red;
}
</style>
<body>
    <div class = "myClass">
        <table>
            <tr>
                <td>
                    <div>
                        <table>
                            <tr>
                                <td>Hello</td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td>World</td>
            </tr>
        </table>
    </div>
</body>
</html>

Answer 1

我为你创建了JSFiddle。

基本上你告诉CSS让表格中第二个TD的背景为红色背景：

{{1}}

有关nth-child（）here的更多信息。

Answer 2

请改用：

<!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> </head> <body ng-controller="mainCtrl"> <table> <tr> <td> <select class="form-control" name="camera-type" ng-options="camera.name for camera in cameraTypes" ng-model="camera"> <option value="">Select a camera</option> </select> </td> <td ng-if="camera"> <select class="form-control" name="mounting-type" ng-options="m.name for m in camera.mounting" ng-model="mounting"> <option value="">Select a mounting</option> </select> </td> </tr> </table> </body> </html>

Answer 3

有没有办法防止背景颜色级联到内表？

是。你可以设置表格的样式：

.myClass table {background: red;}

然后设置嵌套在表格中的表的样式：

.myClass table table {background: white;}

＆＃13;

.myClass table {
    background-color: red;
}

.myClass table table {
    background-color: white;
}

＆＃13;

<div class = "myClass">
        <table>
            <tr>
                <td>
                    <div>
                        <table>
                            <tr>
                                <td>Hello</td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td>World</td>
            </tr>
        </table>
    </div>

＆＃13;

使用CSS防止级联

3 个答案: