2
回答
css的覆盖的问题。。标题字数不够凑
滴滴云服务器,限时包月0.9元,为开发者而生>>>   
 

我想要里面的除了用于渐变效果之外的所有属性。但是又不允许直接改这个class。于是我在他后面又引入了一个css文件,里面只有background:#1D5DCD.但是这会有一个问题。background:-moz-linea....等等没有重写,他也会应用到元素上。怎么办呢

header .ui-bar-a{
	background: #1D5DCD;
    background: -moz-linear-gradient(top, #5193E8 0%, #1C4CBE 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1C4CBE), color-stop(100%, #DB6F19)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #5193E8 0%, #1C4CBE 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5193E8 0%, #1C4CBE 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #5193E8 0%, #1C4CBE 100%); /* IE10+ */
    background: linear-gradient(top, #5193E8 0%, #1C4CBE 100%); /* W3C */
	height: 55px;

}











<无标签>
举报
plugin
发帖于2年前 2回/134阅
共有2个答案 最后回答: 2年前

直接写 background: <color>,保证你后写的 CSS 在原先央样式之后引入就可以了。除非你写的是 background-color: <color> 才会覆盖不了那渐变属性,或者是选择器优先级之类的原因,或者打错文件目录了…

---

它原来的规则全都是 background 挨着应用的,只要浏览器认识后面的任何一个 linear-gradient,那前面的 background 属性就会失效(被覆盖),也就是说渐变存在的时候那个颜色是不起作用的。如果想要颜色和渐变叠加起来,需要写在一个 background: 规则里面,或者用子属性。


foo {
  /*写在一起*/
  background: red linear-gradient(90deg, rgba(227,45,70,0.6), rgba(117,117,255,0.6));

  /*或者分开写在子属性中*/
  background-color: red;
  background-image: linear-gradient(90deg, rgba(227,45,70,0.6), rgba(117,117,255,0.6));
}


若你想要像“引用”一样直接搞到那个选择器下的规则然后再自己覆盖想要改的属性的话,SASS、LESS 等预处理器可以很好的满足这个需求。

另外那段代码目测是早期一些 CSS 渐变生成工具产生的代码吧,语法都跟不上时代了 (´_`)。详情查看:


MDN https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
W3C https://drafts.csswg.org/css-images-3/#linear-gradients
顶部