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/

用两个班改变“li”

3 个答案: