list-style-item CSS 不适用于 UL答案

【问题标题】：list-style-item CSS is not applied to ULlist-style-item CSS 不适用于 UL
【发布时间】：2014-02-19 18:14:31
【问题描述】：

即使我将 display 设置为 list-item 并以 !important 为后缀，我也无法将 list-style-item 应用于我的 UL。我正在使用 Angular 和 bootstrap，并将我的 CSS 应用为 <head> 中的最后一个 <link> - 这是 Angular 应用它的转发器之前的 HTML：

<ul class="shipping-list">
    <li ng-repeat="todo in todos">
        <select ng-model="todo.country">
            <option>Canada</option>
            <option>United Kingdom</option>
            <option>United States</option>
        </select>
        <input type="text" ng-model="todo.text" ng-required="true">
        <i class="fa fa-times" ng-click="deleteTodo(todo)" alt="Remove"></i>
    </li>
    <li>
        <select ng-model="todoCountry">
            <option>Canada</option>
            <option>United Kingdom</option>
            <option>United States</option>
        </select>
        <input type="text" ng-model="todoText"  size="30" placeholder="$shipping">
        <button class="btn btn-primary" ng-click="addTodo()">Add</button>
    </li>
</ul>

Angular 应用它的转发器后的 HTML - 提供完整性虽然我很确定这与 Angular 的使用无关：

<ul class="shipping-list">
  <!-- ngRepeat: todo in todos -->
  <li ng-repeat="todo in todos" class="ng-scope">
    <select ng-model="todo.country" class="ng-pristine ng-valid">
      <option value="Canada">Canada</option>
      <option value="United Kingdom">United Kingdom</option>
      <option value="United States">United States</option>
    </select>
    <input type="text" ng-model="todo.text" ng-required="true" class="ng-pristine ng-valid ng-valid-required" required="required">
    <i class="fa fa-times" ng-click="deleteTodo(todo)" alt="Remove"></i>
  </li><!-- end ngRepeat: todo in todos -->
  <li ng-repeat="todo in todos" class="ng-scope">
    ...
  </li>
</ul>

CSS

//Shipping list
ul.shipping-list {
  list-style-type: none !important;
  color: red;
  border: solid 1px red !important;
}
ul.shipping-list li {
  display:list-item !important;
  border: solid 1px red;    
}
ul.shipping-list input {
  color: red;
  background-color: cyan;  
  border: solid 1px red;
}

结果如下 - 请注意，列表项仍然有项目符号，并且 UL 上没有边框：

【问题讨论】：

在jsfiddle.net 上制作一个样本SSCCE。
因为你在 li 上使用 !important 和 list-item，所以子弹回来了。你不应该使用这么多 !important 没有任何明智的理由。
没有应用为ul.shipping-list 定义的样式属性（border、color 或list-style-type）。可能的原因是某些地方有一些更具体的 CSS 规则会覆盖这些规则。您需要提供和SSCCE。
!important 不会改变输出，两种方法我都试过了。
jsfiddle.net/bFsHH/1

标签： css angularjs twitter-bootstrap html-lists

【解决方案1】：

我在 UL CSS 之前有一个 C# 样式注释：

//Shipping list <= BAD COMMENT
ul.shipping-list { ... }

删除评论解决了问题

ul.shipping-list { ... }

【讨论】：