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

是的，你可以。后面的规则比初始规则更具体，所以它们会覆盖它。

AFAIK，您不再需要cursor:hand。

在css中适当的类继承？

1 个答案: