<分区>
html - 为什么只有我的一些 CSS 选择器有效？
标签 html css css-selectors
我对 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%;
}
最佳答案
您是否直接从文本编辑器中复制了该代码？当我将它复制/粘贴到 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%;
}
.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%;
}<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>关于html - 为什么只有我的一些 CSS 选择器有效？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37433429/