1

我有一个嵌套的 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 中，我想要获得蓝色/红色/蓝色/红色行，不幸的是所有行都是蓝色的，因为这是最后一个样式类。

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

4

2 回答 2

0

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

.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;
            }
于 2013-06-12T22:27:33.530 回答
0

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

于 2013-06-12T21:37:17.887 回答