SVG .fill不想工作

Question

有人可以向我解释为什么我不能更改此svg的填充：

<div class="container">
  <ul class="todo">
    <li>

    This is an item
    <div class ="buttons">
        <button class="remove">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59 59" style="fill;" xml:space="preserve"><g><path d="M29.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C28.5,50.553,28.948,51,29.5,51z"/><path d="M19.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C18.5,50.553,18.948,51,19.5,51z"/><path d="M39.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C38.5,50.553,38.948,51,39.5,51z"/><path d="M52.5,6H38.456c-0.11-1.25-0.495-3.358-1.813-4.711C35.809,0.434,34.751,0,33.499,0H23.5c-1.252,0-2.31,0.434-3.144,1.289C19.038,2.642,18.653,4.75,18.543,6H6.5c-0.552,0-1,0.447-1,1s0.448,1,1,1h2.041l1.915,46.021C10.493,55.743,11.565,59,15.364,59h28.272c3.799,0,4.871-3.257,4.907-4.958L50.459,8H52.5c0.552,0,1-0.447,1-1S53.052,6,52.5,6z M21.792,2.681C22.24,2.223,22.799,2,23.5,2h9.999c0.701,0,1.26,0.223,1.708,0.681c0.805,0.823,1.128,2.271,1.24,3.319H20.553C20.665,4.952,20.988,3.504,21.792,2.681z M46.544,53.979C46.538,54.288,46.4,57,43.636,57H15.364c-2.734,0-2.898-2.717-2.909-3.042L10.542,8h37.915L46.544,53.979z"/></svg>           </button>
        <button class="complete">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve"><g><path d="M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M26,50C12.767,50,2,39.233,2,26S12.767,2,26,2s24,10.767,24,24S39.233,50,26,50z"/><path d="M38.252,15.336l-15.369,17.29l-9.259-7.407c-0.43-0.345-1.061-0.274-1.405,0.156c-0.345,0.432-0.275,1.061,0.156,1.406l10,8C22.559,34.928,22.78,35,23,35c0.276,0,0.551-0.114,0.748-0.336l16-18c0.367-0.412,0.33-1.045-0.083-1.411C39.251,14.885,38.62,14.922,38.252,15.336z"/></svg>
        </button>
    </div>
    </li>

  </ul>
</div>

通过css我尝试操纵：

ul.todo li .buttons button svg {
    width:22px;
    height:22px;
    position:absolute;
    top:50%;
    left:50%;
    margin:0 0 0 -11px;
}

ul.todo li .buttons button.remove svg .fill {
    fill:#c0cecb;

}

ul.todo li .buttons button.remove:hover svg .fill {
    fill:#e85656;

}

ul.todo li .buttons button.complete svg .fill {
    fill:#25b99a;

}

我想问题是我没有正确地将css指向svg ，任何帮助将不胜感激。

Answer 1

svg .fill {}

...将规则应用于具有fill类并且是<svg>标记的后代的任何HTML元素。 如果要选择已设置fill属性的<svg>标签，则可以使用

svg[fill] {}

请注意，没有任何“ 两者之间使用“（空格字符）。有关详细信息，请参见CSS selectors和CSS combinators CSS selectors 。

例如，您的第一个规则应为：

ul.todo li .buttons button.remove svg {
    fill:#c0cecb;
}

...但这太夸张了 （过于具体）。 最可能...

.todo .button > svg {
     fill:#c0cecb;
}

...绰绰有余，而没有影响网站/应用程序中其他任何内容的风险。