css 覆盖问题

[dataminer_2007]

我在页面上引用了一个 css 文件, 需要用到其中的样式 x-abc, 例如

.x-abc {
    border-bottom-style: solid;
    border-bottom-color: #ff0000;
}

但是页面上需要的效果只需要 border-bottom-style,不需要设定 border-bottom-color, 我在页面上重新定义 x-abc

.x-abc {
    border-bottom-style: solid;
}

好像还是会自动设定 border-bottom-color

我的问题是, 如何覆盖引用的 css 中的某个样式(去除样式中的某个属性)？

[魔术世界中文版]

你需要把后定义的样式放在你引入的样式后面 <link rel="stylesheet" href="css/a.css">//这个是你引入的样式，里面有x-abc <style> .x-abc{ border-bottom-color: '这里重新设定为系统默认值';} </style> 这样你之前引入的样式就被覆盖掉了

[萧萧可乐]

这个css的一大特色。。 不过缺点也同样明显。。。 楼主可以去看看bootstrap的btn类 看看它们怎么写的

[dataminer_2007]

引用 4 楼 z284122755 的回复:

你需要把后定义的样式放在你引入的样式后面 <link rel="stylesheet" href="css/a.css">//这个是你引入的样式，里面有x-abc <style> .x-abc{ border-bottom-color: '这里重新设定为系统默认值';} </style> 这样你之前引入的样式就被覆盖掉了

我遇到的情况是 border-bottom-color 是可变的, 无法确定值, 所以不知如何覆盖

[魔术世界中文版]

引用 6 楼 dataminer_2007 的回复:

[quote=引用 4 楼 z284122755 的回复:] 你需要把后定义的样式放在你引入的样式后面 <link rel="stylesheet" href="css/a.css">//这个是你引入的样式，里面有x-abc <style> .x-abc{ border-bottom-color: '这里重新设定为系统默认值';} </style> 这样你之前引入的样式就被覆盖掉了

我遇到的情况是 border-bottom-color 是可变的, 无法确定值, 所以不知如何覆盖[/quote] 这个光靠CSS是无法做到的，需要借助JS或者JQ

[dataminer_2007]

引用 7 楼 z284122755 的回复:

[quote=引用 6 楼 dataminer_2007 的回复:] [quote=引用 4 楼 z284122755 的回复:] 你需要把后定义的样式放在你引入的样式后面 <link rel="stylesheet" href="css/a.css">//这个是你引入的样式，里面有x-abc <style> .x-abc{ border-bottom-color: '这里重新设定为系统默认值';} </style> 这样你之前引入的样式就被覆盖掉了

我遇到的情况是 border-bottom-color 是可变的, 无法确定值, 所以不知如何覆盖[/quote] 这个光靠CSS是无法做到的，需要借助JS或者JQ [/quote] 只需要不设定 border-bottom-color 值就可以

[sharpblade]

还要border吗？要的话，想用什么颜色？再设置一下。 如果不要none,或者0

[yibey]

任何东西上都有一个默认样式的啊 那么你只需要吧这个边框的颜色改成浏览器默认的颜色就可以了啊

.x-abc {
    
    border-bottom-color: 默认颜色;
}

[dataminer_2007]

引用 1 楼 yibey 的回复:

任何东西上都有一个默认样式的啊 那么你只需要吧这个边框的颜色改成浏览器默认的颜色就可以了啊

.x-abc {
    
    border-bottom-color: 默认颜色;
}

我这只是举了个例子, 我需要覆盖引用的 css 中的某个样式(去除样式中的某个属性), 能否做到？

[人生难得一只鸡]

后来定义的样式 总是会覆盖掉之前的，既然如此，你想修改那个属性的样式，重新在设置一下就可以了 例如 一般默认样式重置的时候会去除a链接的下划线 a{text-decoration:none;} 如果页面中的某个链接需要显示下划线，那么 比如class="box"下的 .box a{text-decoration:underline;}覆盖掉即可