Question

即使我将display设置为list-item并使用!important后缀，也无法将list-style-item应用于我的chrome in chrome。我正在使用Angular和bootstrap并将我的CSS应用为<link>中的最后一个<head> - 这是HTML之前的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上没有边框：

List Item style not applied

Answer 1

我在UL CSS之前有一个C＃风格的评论：

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

删除评论解决了问题

ul.shipping-list { ... }

list-style-item CSS不适用于UL

1 个答案: