实现具有不同在线和离线行为的css

Question

正如标题中所解释的，我遇到了一个问题；CSS在线和离线的表现不同。

离线时，我更改了几个CSS规则以获得我想要的导航。

在网上，它会恢复到默认的外观。

​

HTML是这样起草的：

<div class="navbar-fixed">
    <nav id="jeboteled">
        <div id="boja" class="nav-wrapper">
            <div class="row">
                <div class="col s12 center-align logoSlikaNav">
                        <a href="#" data-target="mobile-demo" class="sidenav-trigger">
                                <i class="material-icons">menu</i>
                           </a>
                    <a href="index.html" class="hide-on-med-and-down">
                        <img style="width: 100px; height:50px;" src="img/opcanamjena/holiday_header.png">
                    </a> 
                </div>
                <a href="#">

                <div class="col s2 center-align hide-on-med-and-down linkDiv tooltipped" data-position="bottom" data-tooltip="Accomodation">
                                <i class="fas fa-bed"></i>
                </div>
            </a>

                <a href="Adventure.html">

                <div class="col s2 center-align hide-on-med-and-down linkDiv tooltipped" data-position="bottom" data-tooltip="Adventure">
                                <i class="fas fa-motorcycle"></i>
                </div>
            </a>

                <a href="explore.html">

                <div class="col s2 center-align hide-on-med-and-down linkDiv tooltipped" data-position="bottom" data-tooltip="Explore">
                                <i class="fas fa-compass"></i>
                </div>
            </a>

                <a href="Gastronomy.html">
                <div class="col s2 center-align hide-on-med-and-down linkDiv tooltipped" data-position="bottom" data-tooltip="Gastronomy">
                                <i class="fas fa-utensils"></i>
                </div>
            </a>

                <div class="col s2 center-align hide-on-med-and-down linkDiv tooltipped" onclick="overlaycontactopen()" data-position="bottom" data-tooltip="Contact">
                    <i class="fas fa-info-circle"></i>
                </div>
                <div class="col s2 center-align hide-on-med-and-down linkDiv tooltipped modal-trigger" href="#jezik" data-position="bottom" data-tooltip="Language">
                    <i class="fas fa-language"></i>
                </div>
            </div>           
        </div>
    </nav>
</div>

这是唯一更改的CSS规则。其他一切都和物化css文件一样。

#boja {
background-color: #18185e !important;
}

@media only screen and (min-width: 993px) {
#jeboteled {
    height: 150px;
    }
}

@media only screen and (min-width: 993px) {
.logoSlikaNav {
    transform: translateY(10px);
     } 
}

.linkDiv {
cursor: pointer;
}

.linkDiv:hover {
background-color: #61b9f6;
}

这是它发布的测试站点。

https://jedantest.000webhostapp.com/

Answer 1

正如alexr101在评论中所说，清除缓存做到了这一点！