CSS中带空格和无空格的类之间的区别是什么，没有空格的多个类的使用是什么 [英] What the difference between classes with space and no space in css, what the use of multiple classes with no space
问题描述
我正在使用CSS制作手风琴，以下是我在没有空格的情况下使用CSS类的方法.我用它来消除slideDown和slideUp效果期间的填充动画
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;
}
因为它指出填充为20像素，但是当我检查时似乎根本没有填充！
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;
}
(带空格)
那么CSS中带空格和不带空格的类有什么区别?
So what's the difference between the class in CSS with and without a space?
这是我所有的HTML，带有CSS代码的jQuery:
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>
推荐答案
.className.anotherClassName 是无效的选择器，因此它将被浏览器忽略.空间本身( )是后代选择器.
.className. anotherClassName is invalid selector, so it will be ignored by browsers. Space itself () is a descendant selector.
所以您可能会问 .classA .classB 和 .classA.classB 选择器之间有什么区别.
So you probably ask what's the difference between .classA .classB and .classA.classB selectors.
第一个选择器将匹配放置在 classA 类元素内的所有 classB 类元素，例如:
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>
第二个选择器将匹配具有 classA 和 classB 类的任何元素，例如:
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>
这篇关于CSS中带空格和无空格的类之间的区别是什么，没有空格的多个类的使用是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
