I am confused. How can I apply CSS in appropriate way for this?
Story short 开发者_如何学GoI have widgets sidebar. I style it like this:
.widgets ul {padding: 10px}
Now one of the ULs inside widgets I want to avoid padding from it, but keeping all other ULs use default padding of 10px.
So i tried to give class to children UL which I want no padding on like this
.tabs {padding:0}
I tried ul.tabs, and .widgets ul.tabs nothing seems to take effect. It still receives padding 10px. And I can't afford to do custom padding for every UL inside the widgets.
Can you please tell me what I am missing ?
The html is pretty basic.
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
Thats the html basic framework. I set padding:10px to any ul in PARENT widgets ul but I want specific custom widget to have its own custom styles, I can't do it :( in this case ul class=tabs
The "C" in CSS stands for "cascading". Learn about the cascade and you will see that your second rule is less specific than the first, so the first wins. In general, the rule with more class selectors wins, and #ids trump most stuff.
To answer your question, adding specificity will do it.
.widgets ul.tabs {padding:0}
(assuming the .tabs is indeed on the ul like you said.)
A more specific CSS selector should override a less specific one. So your experiment with using .widgets ul.tabs should work. Is it possible that when you tested that, your browser had cached an earlier version, or some such?
Here's my sample HTML page. First I tried it the way you had it; it didn't work (as it shouldn't). Then I changed it to what is here, and it worked (in Firefox).
<html>
<style>
.widgets ul {padding: 10px}
.widgets ul.tabs {padding:0}
</style>
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
</html>
example of what dman is talking about, with your code:
http://jsfiddle.net/SebastianPataneMasuelli/8WRam/
( i think you might have missed the 's' in .widgets )
加载中,请稍侯......
精彩评论