覆盖 CSS !important 样式

时间:2020-12-22 15:40:12

标签: css wordpress overriding display

我正在 Wordpress 上进行网站开发,而以下样式使我的网站出现错误,导航栏无法正确显示和折叠。它可以在主题引导文件中找到。我只想删除 display:block!important (不是内联或无)。我应该如何编写代码来覆盖它?

.show {
    display: block!important;
}

导航栏代码:

<div class="navbar-collapse collapse" id="navbarSupportedContent" style="padding-right: 0px;">
            <ul class="navbar-nav ml-auto">
                <div class="hori-selector"><div class="left"></div><div class="right"></div></div>
                <li class="nav-item">
                    <a class="nav-link" href="https://gttutor.com/user-dashboard/"><i class="fas fa-tachometer-alt"></i>Dashboard</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-address-book"></i>Address Book</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-clone"></i>Components</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-calendar-alt"></i>Calendar</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-chart-bar"></i>Charts</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-copy"></i>Documents</a>
                </li>
            </ul>
        </div>
function test(){
          var tabsNewAnim = $('#navbarSupportedContent');
          var selectorNewAnim = $('#navbarSupportedContent').find('li').length;
          var activeItemNewAnim = tabsNewAnim.find('.active');
          var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
          var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
          var itemPosNewAnimTop = activeItemNewAnim.position();
          var itemPosNewAnimLeft = activeItemNewAnim.position();
          $(".hori-selector").css({
            "top":itemPosNewAnimTop.top + "px", 
            "left":itemPosNewAnimLeft.left + "px",
            "height": activeWidthNewAnimHeight + "px",
            "width": activeWidthNewAnimWidth + "px"
          });
          $("#navbarSupportedContent").on("click","li",function(e){
            $('#navbarSupportedContent ul li').removeClass("active");
            $(this).addClass('active');
            
            var activeWidthNewAnimHeight = $(this).innerHeight();
            var activeWidthNewAnimWidth = $(this).innerWidth();
            var itemPosNewAnimTop = $(this).position();
            var itemPosNewAnimLeft = $(this).position();
            $(".hori-selector").css({
              "top":itemPosNewAnimTop.top + "px", 
              "left":itemPosNewAnimLeft.left + "px",
              "height": activeWidthNewAnimHeight + "px",
              "width": activeWidthNewAnimWidth + "px"
            });
          });
        }
        $(document).ready(function(){
          setTimeout(function(){ test(); });
        });
        $(window).on('resize', function(){
          setTimeout(function(){ test(); }, 550);
        });
        $(".navbar-toggler").click(function(){
          setTimeout(function(){ test(); });
        });
        
        $(document).ready(function(){
          $("button").click(function(){
            $(".navbar-collapse").toggle();
        });

0 个答案:

没有答案