css - 理解 CSS 类选择器在 meteor 中的使用

Question

我正在使用 meteor 尝试设置列表中点击元素的样式，但在理解定义 CSS 选择器的正确方法时遇到了一些问题。

我在 html 中有一个无序列表:

<template name="template1">
  <ul>
  {{#each document}}
    <li class='document {{selectedClass}}'>{{name}}: {{num}}</li>
  {{/each}}
  </ul>

这样当下面的客户端 JavaScript 运行时，被点击的元素应该收到一个类 'document selected' 而其他的应该有一个类 '文档'

if (Meteor.isClient) {

  Template.template1.selectedClass = function (){
    var documentId = this._id;
    var selectedDocument = Session.get('selectedDocument');
    if (selectedDocument === documentId) {
      return 'selected';
    };
  };

  Template.leaderboard.events ({
    'click li.document': function() {
      var documentId = this._id;
      Session.set('selectedDocument', documentId);
    }
  )}

};

我正在使用 CSS 选择器

.selected {
  background-color:grey;
}

这似乎有效，但我不明白为什么。该类名为 'document selected' 但 .selected 似乎将其挑出来。

Answer 1

您可以在 html 中使用多个类。

例如:

<div class="foo bar baz">Foo bar and baz</div>

现在，您可以使用它们中的任何一个:

.foo{
  color: red;
}

或者，所有这些都没有空格:

.foo.bar.baz{
   color: green;
}

---

But, why we use it ?

如果您有多个具有相同类的 div，如下所示:

<div class="foo bar baz">Foo bar and baz</div>
<div class="bar">Foo bar and baz</div>

您可以按如下方式覆盖 css 规则:

.bar{
  color: red;
}
/*.bar element but which has foo class also*/
.foo.bar{
  color: blue;/*this overrides the color in class="foo bar" previously defined red color*/
}

您可以在这里了解更多信息:

http://css-tricks.com/multiple-class-id-selectors/