无法覆盖列表样式类型

Question

我在CSS中有一些具有预先存在样式的HTML。我需要重写列表样式（有一些有趣的外观要点），但是我似乎无法弄清楚该怎么做。

<!-- pre-existing css style sheets-->
<link href = "css/bootstrap.css" rel="stylesheet" type="text/css">

<link type="text/css" rel="stylesheet" href="https://www.doj.state.wi.us/sites/default/files/css/css_xE-rWrJf-fncB6ztZfd2huxqgxu4WO-qwma6Xer30m4.css" media="all" />
<link type="text/css" rel="stylesheet" href="https://www.doj.state.wi.us/sites/default/files/css/css_Q7R7Blo9EYqLDI5rIlO_T3uTFBjIXjLpcqMHjTvVdmg.css" media="all" />
<link type="text/css" rel="stylesheet" href="https://www.doj.state.wi.us/sites/default/files/css/css_BRhQSG-b-QpoRSwrSBwmFx6dU3gjEZca4NFu_UQo2-Q.css" media="all" />
<link type="text/css" rel="stylesheet" href="https://www.doj.state.wi.us/sites/default/files/css/css_fEIYHf7a6__HmaZI0WMfFyuL6hwZU7kJ4ooi1KzkINI.css" media="all" />
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css" media="all" />
<link type="text/css" rel="stylesheet" href="https://www.doj.state.wi.us/sites/default/files/css/css_FHu0mvAhlYyqLJqNhrBbiHhehxLefpaK6N2l45DULVU.css" media="all" />
<link type="text/css" rel="stylesheet" href="https://www.doj.state.wi.us/sites/default/files/css/css_bG9BErYV7KOPQxmg--DBVGPBq9-iGTGLJVm90z3JQX0.css" media="all" />
<!-- my css-->
<link href = "css/style.css" rel="stylesheet" type="text/css"> 

<nav class="navbar" style='float:left'>
      <div class="container-fluid" width='300px'>
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
            </button>

        </div>
        <div class="collapse navbar-collapse navbar-left " id="myNavbar">
            <ul class="nav navbar-nav navText " id="myList" style='list-style-type: none'>
                <li ><a href="production/index.html" id="navText">About</a></li>
                <li><a href="research/index.html" id="navText">Staff</a></li>
                <li><a href="education/index.html" id="navText">Data Dashboards</a></li>
                <li><a href="people/index.html" id="navText">Current Projects</a></li>
            </ul>
    </div>
      </div>
  </nav>

我似乎无法覆盖列表中现有的样式要点。我有以下内容，但无济于事：

#myList {
        list-style-type: none !important
    }

#navText {
        list-style-type: none !important
    }

#navText li {
        list-style-type: none !important
    }

ul {
    list-style-type: none !important
}

关于如何解决此问题的任何建议，我们都会感激不尽。谢谢。

Answer 1

您需要使用的属性只是list-style

ul {
    list-style: none;
}

但是请注意，当您执行此操作时-您可能需要对ul进行样式设置以删除左填充-大多数浏览器会应用40px的左填充以允许缩进。