Question

我正在使用meteor尝试设置列表中已点击项目的样式，但在理解定义CSS选择器的正确方法时遇到一些麻烦。

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

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

这样当以下客户端JavaScript运行时，点击的项目应该会收到'document selected'的类，而其他的应该有'document'的类

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;
}

但是，为什么我们使用它？

如果您有多个具有与以下相同类别的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/

Answer 2

你不能拥有一个名为document selected的类，因为这是CSS中的两个类。不允许使用类名或ID中的空格，因为空格用作多个类/ ID的分隔符。

因此，对于来自以下css选择器的<div class="document selected"> css这样的元素适用：

.document { ... }

.selected { ... }

.document.selected { ... }

前两个选择器适用于在其class属性中具有命名类的每个元素。第3个仅适用于具有BOTH类名的元素。

了解meteor中的CSS类选择器使用

2 个答案: