Question

为什么更改两个CSS规则的顺序会改变我的结果？当我使用它时，它给了我一个我不想要的边框。这会产生我想要的错误结果：

.menuBar .navbar-nav > li > a::after, .menuBar .navbar-nav > li.active > a::after {
    background-color: #00c4ff;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    margin: auto 0;
    right: 0;
    top: 0;
    transition: width 1s ease-in-out 0s;
    width: 0;
}
.menuBar .navbar-nav > li > a:hover::after, .menuBar .navbar-nav > li.active > a::after {
    width: 100%;
}

但是，如果我只是改变这两个CSS规则的顺序，那么它给了我正确的结果。那么这里发生了什么？

.menuBar .navbar-nav > li > a:hover::after, .menuBar .navbar-nav > li.active > a::after {
    width: 100%;
}

.menuBar .navbar-nav > li > a::after, .menuBar .navbar-nav > li.active > a::after {
    background-color: #00c4ff;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    margin: auto 0;
    right: 0;
    top: 0;
    transition: width 1s ease-in-out 0s;
    width: 0;
}

这是我的标记

<div class="menuBar jumplinks">
                <nav class="navbar navbar-default">
                    <div class="navbar-header">
                        <button aria-expanded="false" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="active"><a href="#home">Home</a></li>
                            <li><a href="#about">About</a></li>
                            <li><a href="#services">Services</a></li>
                            <li><a href="#portfolio">Work</a></li>
                            <li><a href="#pricing">Pricing</a></li>
                            <li><a href="#blog">Blog</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </div>
                </nav>
            </div>

Answer 1

由于它们都包含width的设置，因此将width更改为0;

.menuBar .navbar-nav > li > a::after, .menuBar .navbar-nav > li.active > a::after {
    background-color: #00c4ff;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    margin: auto 0;
    right: 0;
    top: 0;
    transition: width 1s ease-in-out 0s;
    width: 0; /* <------------------------- THIS LINE */
}

另一个将width更改为100%;

.menuBar .navbar-nav > li > a:hover::after, .menuBar .navbar-nav > li.active > a::after {
    width: 100%; /* <------------------------- THIS LINE */
}

外观发生变化的原因是它正在读取文件前后的内容。这意味着当它显示width: 100%;时，width属性将为100%，但当它到达width: 0;时，它会将width更改为0。< / p>

希望这有帮助！：）

为什么更改两个CSS规则的顺序会改变我的结果？

1 个答案: