SVG .fill伪不想要工作

可以请人向我解释为什么我不能改变这个SVG的填充：我试图操纵SVG .fill伪不想要工作

<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，非常感谢任何帮助。

来源

2017-03-06 toliot

svg .fill {}

...适用规则，具有fill类是<svg>标签的后裔任何HTML元素。如果你想选择一个<svg>标签具有fill属性集，您可以使用

svg[fill] {}

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

例如，您的第一条规则应该是：

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

...但是，这是太大材小用（过于具体的）。最有可能...

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

...是绰绰有余，没有影响你的网站/应用程序的任何其他的风险。

来源

2017-03-06 04:07:08

SVG .fill伪不想要工作

回答

相关问题