html - 用两个类改变“li”

Question

我有

<li class="item itemshad edited">
  <div class="itemsetting" style="">
    <span class="icon"><i class="icon-home"></i></span>
    <span class="inputspan" style="float: left;margin-top: 1px;"><input class="menuName" type="text" value="Text" style=""></span><span class="list" style="margin-left: 6px;"><i class="icon-reorder"></i></span>
  </div>
</li>

<li class="item itemshad edited selected">
  <div class="itemsetting" style="">
    <span class="icon"><i class="icon-home"></i></span>
    <span class="inputspan" style="float: left;margin-top: 1px;"><input class="menuName" type="text" value="Text" style=""></span><span class="list" style="margin-left: 6px;"><i class="icon-reorder"></i></span>
  </div>
</li>

如果“li”有一类被选中和编辑来改变输入边框的粗细。

如果是这样

.selected .edited input  {
    border: 2px dotted #ccc;
}

不工作

Answer 1

要在单个元素上指定多个类，只需将它们连接在一起：

.selected.edited input

这是因为空格字符是一个组合子，意思是“任何后代”

Answer 2

做这个：

.selected.edited input

删除了空格字符。否则.edited必须在里面.selected。

Answer 3

它应该是

.edited.selected input  {
    border: 2px dotted #ccc;
}

有关多个类/ID 和类选择器的更多信息 - http://css-tricks.com/multiple-class-id-selectors/