CSS problem with selectors
All I want DIVs from red to pink to be colored red and DIVs from pink to red to be colored pink. But this does not work (all is red):
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
displ开发者_高级运维ay: inline-block;
padding: 50px;
background: yellow;
border: solid 1px black;
}
.pink div {
background: pink;
}
.red div {
background: red;
}
</style>
</head>
<body>
<div class="red">
<div>
<div>
<div>
<div>
<div class="pink">
<div>
<div>
<div class="red">
<div>
<div>
<div>
<div class="pink">
<div>
<div>
<div>
<div>
<!-- and so on -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I know why it doesn't work but now I am looking for a solution. Please suggest anything as long as:
- it is in pure CSS;
- it doesn't require defining IDs;
- it can work for any numbers of DIVs;
- the class names (
redandpink) can be defined for any of the DIVs.
EDITED
background: inherit is your friend. Since background usually does not inherit.
div {
display: inline-block;
padding: 10px;
background: yellow;
border: solid 1px black;
}
div div {
background: inherit;
}
.red {
background: red;
}
.pink {
background: pink;
}
http://jsfiddle.net/pU6Ds/2
Now slide these off to the side to prove each one has an opaque background:
http://jsfiddle.net/pU6Ds/1/
You can use the following, of which the most important part is the default background-color: transparent; for the regular divs, which allows the background-color, where specified on the .pink and .red divs, to show through:
div {
display: block;
min-height: 2em;
margin: 0 auto;
padding: 0.2em 0;
border: 1px solid #000;
background-color: transparent;
}
.red {
background-color: red;
}
.pink {
background-color: pink;
}
JS Fiddle demo.
加载中,请稍侯......
精彩评论