了解 CSS 类选择器在流星中的使用答案

【问题标题】：Understanding CSS class selector use in meteor了解 CSS 类选择器在流星中的使用
【发布时间】：2015-01-25 21:08:10
【问题描述】：

我正在使用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 似乎选择了它。

【问题讨论】：

标签： css meteor

【解决方案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*/
}

【讨论】：

【解决方案2】：

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

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

.document { ... }

.selected { ... }

.document.selected { ... }

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

【讨论】：