问题
I am making an accordion using CSS, the below is my use of CSS class without space. I use this to eliminate the animation of padding during slideDown and slideUp effect
.acc_container.block{
padding: 20px;
}
since it stated out that padding is 20 pixels but when i check it seems like no padding at all!!
instead, i need to add this in order to let my padding works
.acc_container. block{
padding: 20px;
}
(with space)
So what's the difference between the class in CSS with and without a space?
This is all my HTML, jQuery with CSS code:
<html>
<head>
<style type="text/css">
body {
font: 15px normal Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
line-height: 1.7em;
}
.container {
width: 500px;
margin: 0 auto;
}
h2.acc_trigger {
padding: 0;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
display: block;
padding: 0 0 0 50px;
color: #fff;
cursor: pointer;
}
h2.active {
background-position: left bottom;
}
.acc_container {
margin: 0 0 5px;
padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container.block {
padding: 20px;
}
.block {
padding: 20px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script> type="text/javascript">
$(document).ready(function(){
$('.acc_container').hide(); $('.acc_trigger:first').addClass('active').next().show();
$('.acc_trigger').click(function(){
if($(this).next().is(':hidden'))
{
$('.acc_trigger').removeClass('active').next().slideUp();
$(this).toggleClass('active').next().slideDown();
}
return false; });
});
</script>
</head>
<body>
<div class="container">
<h2 class="acc_trigger">Web Design and Development</a></h2>
<div class="acc_container">
<div class="block">
<h3>Need A website?</h3>
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut
venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum
transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi
suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse,
autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum.
Delenit patria nunc os pneum acsi nulla magna singularis proprius autem
exerci accumsan.</p>
</div>
</div>
<h2 class="acc_trigger">Logo/ Corporate Identity</h2>
<div>
class="acc_container">
<div class="block">
<h3>Need a Logo?</h3>
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut
venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum
transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi
suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse,
autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum.
Delenit patria nunc os pneum acsi nulla magna singularis proprius autem
exerci accumsan. </p>
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut
venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum
transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi
suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse,
autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum.
Delenit patria nunc os pneum acsi nulla magna singularis proprius autem
exerci accumsan. </p>
</div>
</div>
<h2 class="acc_trigger">Search Engine Optimization</a></h2>
<div class="acc_container">
<div class="block">
<h3>Need to be heard</h3>
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut
venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum
transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi
suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse,
autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum.
Delenit patria nunc os pneum acsi nulla magna singularis proprius autem
exerci accumsan.</p>
</div>
</div>
</div>
</body>
</html>
回答1:
.className. anotherClassName is invalid selector, so it will be ignored by browsers. Space itself () is a descendant selector.
So you probably ask what's the difference between .classA .classB and .classA.classB selectors.
First selector will match any element with class classB that's placed within element with class classA, eg.:
<div class="classA">
<p>
Hello World!
<span class="classB">this text will be matched by first selector</span>
Lorem ipsum!
</p>
</div>
Second selector will match any elements with both, classA and classB classes, eg.:
<p class="classA">This won't be matched</p>
<p class="classA classB classC classD">But this will be</p>
回答2:
It´s all about addressing the right element the right way AND taking into account the fact that older versions of Internet Explorer don´t recognize multiple classes on an element and will only use the last one.
Suppose your html is:
<div class="one two">some content</div>
older versions of IE will only apply class .two.
However, in modern browsers you can access it like:
.one {
}
or
.two {
}
or
.one.two {
}
The last one is obviously the most specific.
By the way, something like:
.acc_container. block{ padding: 20px; }
is bound to lead to problems as there is no html element called block and .acc_container. is not a valid class name I think...
回答3:
.acc_container.block - this one means that both "acc_container" and "block" are applied to element
Like
<div class="acc_container block another-class">
.acc_container .block - means: each element with class "block" inside element with class "acc_container"
For example:
<div class="acc_container"> <p class="block">...
来源：https://stackoverflow.com/questions/4511062/what-the-difference-between-classes-with-space-and-no-space-in-css-what-the-use