html - How can I disable inherited css styles? -
I am creating a container with rounded corners using the following method:
Div Goal {background: # CFFEB6 url ('tr.gif') No-repeat top right; } Div.rounded div {background: url ('br.gif') No-true to repeat; } Div.rounded div div {background: url ('bl.gif') Anyone left under repeat; } Div.rounded div div div {padding: 10px; }
Now I want to use a div in my container:
.button {border: 1px solid # 999; Background: #eeeeee url (''); Text-align: center; }. Button: Hover {background-color: # C4A2F2; } & Lt; Div square = 'round' & gt; & Lt; Div & gt; & Lt; Div & gt; & Lt; Div & gt; & Lt; Div class = 'button' & gt; & Lt; A href = '#' & gt; Test & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;
However, in my nested div has inserted a div, the button has blue image in the corner.
How do I remove an inherited background image?
simple answer change
div.rounded div div div {padding : 10px; }
to
div.rounded div div div {background-image: none; Padding: 10px; }
The reason for this is that when you create rules for div.rounded div div
, then each div < Inside a class of
circular
, nesting victim inside a code within element / code> element div
is.
If you want to target only a direct descendant, then you see the syntax div.rounded div> You can use. Div
(although it is only supported by recent browsers).
By coincidence, you can usually simplify this method to use only two div
s up and down or left and right). Using a technique.
Comments
Post a Comment