Question

我对HTML / CSS有点新鲜，而且我很难弄清楚为什么我的某些选择器无法正常工作。

就像现在一样，只有.tasklist和.totalleft似乎生效了。我已经尝试将它们全部更改为类选择器，但这似乎也无效。我认为语法是正确的，因为我一次尝试只做一个并且它们起作用，但是当它们在一起时它起作用并不起作用。我在这里缺少什么......？谢谢！

HTML

  <body ng-app="app" ng-controller="demoController">

    <center><h1>Todos by Angular.js</h1></center>

    <div>
      <input type="text" ng-model="input" placeholder="What needs to be done?">
      <button type="submit" ng-click="add()">Add task</button>
    </div>
    <input type="checkbox" ng-model="allChecked" ng-change="markAll(allChecked)">Mark all as complete<br>

    <ul class="tasklist" >
      <li ng-repeat="item in items">
        <input type="checkbox" ng-model="item.done">
        <label id="done-{{item.done}}">{{item.val}}</label>
        <hr>
      </li>
    </ul>
    <br>

    <div class="totalleft">
      {{numLeft()}} out of {{items.length}} remaining
      <button id="clearbutton" type="submit" ng-click="clearItems()" ng-show="showClear()">Clear {{numCompleted()}} items</button>
    </div>

  </body>

CSS

.tasklist {
  list-style-type:none;
  padding-left: 0px;
  margin-left: 0px;
  text-indent: 0px;
}

#done-true {
  text-decoration: line-through;
  color: grey;
}

.totalleft {
  background-color: #E5E5E5;
  color: dark grey;
}

#clearbutton{
  font-size: 50%;
}

Answer 1

您是否直接从文本编辑器复制了该代码？当我将其复制/粘贴到SO编辑器中时，我看到了一个额外的UTF字符：

看到红点？当我在编辑器中删除它们时，样式工作。这是没有额外元素的代码：

.tasklist {
  list-style-type:none;
  padding-left: 0px;
  margin-left: 0px;
  text-indent: 0px;
}

#done-true {
  text-decoration: line-through;
  color: grey;
}

.totalleft {
  background-color: #E5E5E5;
  color: dark grey;
}

#clearbutton{
  font-size: 50%;
}

＆＃13;

.tasklist {
  list-style-type:none;
  padding-left: 0px;
  margin-left: 0px;
  text-indent: 0px;
}

#done-true {
  text-decoration: line-through;
  color: grey;
}

.totalleft {
  background-color: #E5E5E5;
  color: dark grey;
}

#clearbutton{
  font-size: 50%;
}

＆＃13;

<body ng-app="app" ng-controller="demoController">

    <center><h1>Todos by Angular.js</h1></center>

    <div>
      <input type="text" ng-model="input" placeholder="What needs to be done?">
      <button type="submit" ng-click="add()">Add task</button>
    </div>
    <input type="checkbox" ng-model="allChecked" ng-change="markAll(allChecked)">Mark all as complete<br>

    <ul class="tasklist" >
      <li ng-repeat="item in items">
        <input type="checkbox" ng-model="item.done">
        <label id="done-{{item.done}}">{{item.val}}</label>
        <hr>
      </li>
    </ul>
    <br>

    <div class="totalleft">
      {{numLeft()}} out of {{items.length}} remaining
      <button id="clearbutton" type="submit" ng-click="clearItems()" ng-show="showClear()">Clear {{numCompleted()}} items</button>
    </div>

  </body>

＆＃13;

为什么只有部分CSS选择器正常工作？

1 个答案: