Question

我正在做一些关于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 dev工具上显示我的高亮颜色或我的风格，所以我想知道我应该做什么...我们也使用post-css

Answer 1

解决了它（呃）

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

@Marvin是的，那不是，幸运的是xD

Answer 2

如果一个项目有多个类，那么正确的方法是在没有空格的情况下堆叠它们。

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

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

＆＃13;

.item {
  padding: 1em 2em;
  margin: 1em;
  border: solid 1px #ccc;
}

.item.highlighted {
  border-color: red;
  background: #f0f0f0;
}

＆＃13;

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

＆＃13;

两个类的CSS选择器

2 个答案: