两个类的 CSS 选择器答案

【问题标题】：CSS selector for two classes两个类的 CSS 选择器
【发布时间】：2017-10-16 18:07:15
【问题描述】：

我正在做一些关于 SVG 的工作，我需要突出显示所述 SVG 的特定元素。我通过更改元素的类并使用 CSS 使其具有不同的颜色来做到这一点。到目前为止，这是我尝试过的：

  .series-a .bar {
    stroke: #00BCF0;
    .bar .highlight: {
      stroke: #FF5722;
    }
  }
  .series-a .bar {
    stroke: #00BCF0;
    .highlight: {
      stroke: #FF5722;
    }
  }
  .series-a .bar {
    stroke: #00BCF0;
    &&.highlight: {  
      stroke: #FF5722;
    }
  }
  .series-a .bar {
    stroke: #00BCF0;
  }
  .series-a .bar .highlight {
    stroke: #FF5722;

这些都没有在 chrome 开发工具上显示我的突出显示颜色或我的风格，所以我想知道我应该做什么......我们也在使用 post-css

【问题讨论】：

对于多类删除空间，即.bar.highlight
尝试提供一个真实的minimal reproducible example。您的 CSS 很有用（尽管您提供的似乎不是 CSS，而且您还修剪了结尾），但与您要应用它的标记相比，它的用处不大！以live demo embedded in the question 的形式提供您的 MCVE 通常很有用
给我们编译好的css，或者像@Quentin说的提供MCV例子
: 应该做什么？

标签： javascript css svg css-selectors

【解决方案1】：

解决了（呵呵）

  .series-a {
    .bar {
    stroke: #00BCF0;
    }
   .highlight {
        stroke: #FF5722;
      }

@Marvin 是的，不是这样，幸运的是 xD

【讨论】：

【解决方案2】：

如果一个项目有多个类，正确的方法是把它们堆叠起来，不留空格。

.a .b 表示选择.b 中的.a

.a.b 表示 选择 .a 也有类 .b

.item {
  padding: 1em 2em;
  margin: 1em;
  border: solid 1px #ccc;
}

.item.highlighted {
  border-color: red;
  background: #f0f0f0;
}

<p class="item">This is the first item</p>
<p class="item highlighted">This is the second item</p>
<p class="item">This is the third item</p>

【讨论】：