Question

我有一个嵌套的html结构，在div内部有div（在行内创建行）。我需要允许用户设置div（行）css（添加css类）。当css特异性相同时，我很难找到解决方案。例如，我想创建四个级别的嵌套行，第一行有红色边框，第二行和第三行有蓝色，第四行有红色。使用下面的标记和css第四行有蓝色边框而不是红色，因为css特异性是相同的并且应用了最后一个类。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style>
        .main {
            width: 300px;
            height: 100px;
        }

            .main .row {
                width: 100%;
                height: 100%;
                border: 1px solid #808080;
            }

                .main .row [class*="span"] {
                    display: block;
                    min-height: 30px;
                    margin-top: 5px;
                    margin-bottom: 5px;
                }

            .main .red .bp1 {
                border: 2px solid red;
                margin-left: 10px;
                margin-right: 10px;
            }


            .main .blue .bp1 {
                border: 2px solid blue;
                margin-left: 20px;
                margin-right: 20px;
            }
    </style>
</head>
<body>

    <div class="main">
        <div class="row red">
            <div class="span bp1">
                <div class="row blue">
                    <div class="span bp1">
                        <div class="row blue">
                            <div class="span bp1">
                                <div class="row red">
                                    <div class="span bp1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row blue">
            <div class="span bp1">
                <div class="row red">
                    <div class="span bp1">
                        <div class="row blue">
                            <div class="span bp1">
                                <div class="row red">
                                    <div class="span bp1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

在第二个嵌套的div中，我想得到蓝色/红色/蓝色/红色的行，不幸的是所有都是蓝色的，因为这是最后一个样式类。

有没有办法解决这个问题？

Answer 1

将!important添加到要覆盖的任何属性值的末尾。例如，width: 100% !important;

Answer 2

如果您使用直接子选择器：＆gt; ，你应该得到一些有用的东西。

.main {
            width: 300px;
            height: 100px;
        }

            .main .row {
                width: 100%;
                height: 100%;
                border: 1px solid #808080;
            }

                .main .row [class*="span"] {
                    display: block;
                    min-height: 30px;
                    margin-top: 5px;
                    margin-bottom: 5px;
                }

            .main .red > .bp1 {
                border: 2px solid red;
                margin-left: 10px;
                margin-right: 10px;
            }


            .main .blue > .bp1 {
                border: 2px solid blue;
                margin-left: 20px;
                margin-right: 20px;
            }

在嵌套元素中覆盖css

2 个答案: