css - css 中正确的类继承？

Question

我对 css 的类继承感到困惑。我有这个:

<ul id='grok'>
    <li class='foo'></li>
<ul>

有时我想更改 li 元素的颜色和类名，现在我正在这样做:

#grok li, .red {
  background-color: red;
  margin: 5px; 
  padding: 5px;
  cursor: hand;
  cursor: pointer;
  text-align: left;
}

#grok li.green {
  background-color: green;
  margin: 5px; 
  padding: 5px;
  cursor: hand;
  cursor: pointer;
}

#grok li.blue {
  background-color: blue;
  margin: 5px; 
  padding: 5px;
  cursor: hand;
  cursor: pointer; 
}

换句话说，除了颜色不同，所有的定义都是一样的。我可以把它压缩成这样吗:

#grok li {
  background-color: white;
  margin: 5px; 
  padding: 5px;
  cursor: hand;
  cursor: pointer;
  text-align: left;
}

#grok li.red {
  background-color: red;
}

#grok li.green {
  background-color: green;
}

#grok li.blue {
  background-color: blue;
}

?这样工作起来会愉快得多。我唯一的要求是我能够通过类名在我的 ul 元素中找到一个元素，所以当我对此使用 jquery 时，我需要能够找到一个类名为“li.blue”等的元素(否则我不需要这些单独的类)。

谢谢

Answer 1

是的，你可以。后面的规则比最初的规则更具体，因此它们将覆盖它。

据我所知，您不再需要 cursor:hand。