DIV下面子元素的颜色被页面背景颜色覆盖问题css？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DIV下面子元素的颜色被页面背景颜色覆盖问题css？相关的知识，希望对你有一定的参考价值。
参考技术A 问题详述：当设置块级元素div颜色为粉色，页面背景颜色为白色时，div子元素比如<p>段落内容在浏览器界面没有显示出父元素div的粉色，而显现出了页面背景的白色。（如图1）
事发现场：
<!doctype html>
<html lang="zh-cn">
<head>
<title>颜色覆盖问题还原</title>
<meta charset="utf-8">
<style>
*
background-color:white;
div
background-color:pink;
</style>
</head>
<body>
<div>天呐我是一整段
<p>我是一段话</p>
<p>我是一段话</p>
<p>我是一段话</p>
<p>我是一段话</p>
</div>
</body>
</html>
问题解决方法：
简单 (:зゝ∠)
把*改成body，还我粉色世界！
问题参考链接:
和我的问题一样 http://bbs.51cto.com/thread-1151863-1-1.html
这个问题更深一点 http://bbs.csdn.net/topics/380241918
是不是很简单，是不是很炫酷，是不是觉得自己傻缺的可爱......
设置/覆盖背景颜色时的 jQuery / CSS 优先级
【中文标题】设置/覆盖背景颜色时的 jQuery / CSS 优先级【英文标题】：jQuery / CSS precedence when setting/overriding background-color 【发布时间】：2012-03-14 04:36:38 【问题描述】：我正在使用 jQuery 将 addClass 悬停在 div...但背景颜色不会改变。我猜这是因为它以前在 CSS 中被分配了背景颜色？ hover 类上的其他属性（边框）在悬停时出现，因此 addClass 正在工作。
我该如何/应该如何完成这项工作？
jQuery
$('.pick1-box').hover(
-> $(this).addClass('hover')
-> $(this).removeClass('hover')
)
CSS
.pick1-box, .pick2-box
...
background: #eee;
...
.hover
background-color: yellow;
border: 1px solid red;
html
...
<li class='nominee clearfix' id='146'>
<div class='candidate'>
<img src="/assets/25803sm.jpg" />
Dick Waddington
</div>
<div class='pick-boxes'>
<div class='pick1-box'>
1
</div>
<div class='pick2-box'>
2
</div>
</div>
</li>
...
【问题讨论】：
你添加类然后立即删除它？浏览器可能甚至没有时间在已删除之前从正在添加的类中提取更改。 @Marc B：那是CoffeeScript syntax。 嗯，当标题说“jquery”并使用 js-invalid 语法时，我想知道...... @BoltClock。那么-> 是什么意思呢？
我们将不得不看到更多你的代码。您给定的代码本身可以正常工作：jsfiddle.net/BoltClock/h2HYC
【参考方案1】：
这取决于你如何加载 jquery 和代码，但试试这个：
.hover
background-color: yellow !important;
border: 1px solid red;
【讨论】：
不是我的反对意见，但这通常被认为是一种不好的做法。important 真的应该只作为最后的手段使用。这通常是糟糕设计的标志。
是的。但是在不知道 css 声明的正确顺序的情况下……这似乎是解决它的最简单方法。无论如何，尽可能避免它【参考方案2】：
您可以尝试对 CSS 重新排序或添加重要内容，或者您可以执行以下操作：
$('.pick1-box').hover($(this).attr('style', 'background-color: yellow;border: 1px solid red;'),$(this).removeAttr('style'));
因为元素样式优先。
【讨论】：
【参考方案3】：正如您所说，问题是因为样式已在受影响元素的样式属性中被覆盖。您有两种选择：
-
Don't change the element's css directly.
Use !important on the settings you absolutely need to override element styles.
Change the element's css directly, but remove them once you're done with them.
【讨论】：
我想我很困惑。 回复：#1 不要直接更改 css： 但是，在这种情况下，我不相信我是（尽管$(this).css('background-color', 'yellow') 有效）。我只是添加一个类标签。【参考方案4】：
您可以使第二条规则更具体：
.pick1-box.hover, .pick2-box.hover
background-color: yellow;
border: 1px solid red;
css specificity
这假设您的 .hover css 实际上发生在 .pick1-box 规则之前，因为它们具有相同的特异性，稍后发生的将具有优先权。
【讨论】：
没有变化。边框变为红色，但背景仍为灰色 (#eee) 欣赏特异性链接！以上是关于DIV下面子元素的颜色被页面背景颜色覆盖问题css？的主要内容，如果未能解决你的问题，请参考以下文章
css设置背景颜色了，为什么没出来，在设计里有，在网页中就没有？求解
jquery如何使css设定好背景颜色的div去掉背景颜色？