css中带空格和不带空格的类有什么区别，多个不带空格的类有什么用答案

【问题标题】：What the difference between classes with space and no space in css, what the use of multiple classes with no spacecss中带空格和不带空格的类有什么区别，多个不带空格的类有什么用
【发布时间】：2011-05-29 12:07:04
【问题描述】：

我正在使用 CSS 制作手风琴，下面是我对 CSS 类的使用，没有空格。我用它来消除slideDown和slideUp效果期间的填充动画

.acc_container.block{
    padding: 20px; 
}

因为它声明填充是 20 像素，但是当我检查时似乎根本没有填充！！

相反，我需要添加它以让我的填充工作

.acc_container. block{
    padding: 20px; 
}

（带空格）

那么 CSS 中带空格和不带空格的类有什么区别呢？

这是我所有的 HTML，带有 CSS 代码的 jQuery：

<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=&quot;acc_container&quot;&gt;
        <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>

【问题讨论】：

标签： javascript jquery css class

【解决方案1】：

.className. anotherClassName 是无效的选择器，所以它会被浏览器忽略。空间本身 () 是 descendant selector。

所以你可能会问.classA .classB 和.classA.classB 选择器有什么区别。

第一个选择器将匹配任何类 classB 的元素，该元素位于类 classA 的元素中，例如：

<div class="classA">
  <p>
    Hello World!
    <span class="classB">this text will be matched by first selector</span>
    Lorem ipsum!
  </p>
</div>

第二个选择器将匹配任何同时具有classA 和classB 类的元素，例如：

<p class="classA">This won't be matched</p>
<p class="classA classB classC classD">But this will be</p>

【讨论】：

但是如你所见，为什么我可以使用 .classA.classB 而没有两个类的元素？谢谢你的解释
您正在使用.classA.classB 选择器并且规则应用于元素<div class="classA">?那不应该发生。所有主要浏览器都很好地支持类选择器（IE6 有一些问题）。请输入说明问题的完整代码。
是否将
content
视为
？以及如何将灰色部分放在评论中的代码上谢谢
不，他们不是。第一个代码是元素div，其类classA 具有一个子元素（另一个div）并且该子元素具有一个类classB。第二个代码是单个元素div，有两个类classA 和classB。关于灰色部分... SO 为“内联代码”提供了简单的标记。使用 [反引号](en.wikipedia.org/wiki#Technical_notes) to wrap your code: code-here `
好答案，我认为这可能会进一步澄清@Crozin 的答案：第一个选择器 (.classA .classB) 不适用于
...
（...但正如 Crozin 所说，将适用于 '
...
）

【解决方案2】：

这一切都是为了以正确的方式处理正确的元素并且考虑到旧版本的 Internet Explorer 不能识别元素上的多个类，并且只会使用最后一个.

假设你的 html 是：

<div class="one two">some content</div>

旧版本的 IE 将只应用类 .two。

但是，在现代浏览器中，您可以像这样访问它：

.one {
}

或

.two {
}

或

.one.two {
}

最后一个显然是最具体的。

顺便说一句：

.acc_container. block{ padding: 20px; }

必然会导致问题，因为没有名为block 的html 元素并且.acc_container. 不是我认为的有效类名...

【讨论】：

【解决方案3】：

.acc_container.block - 这意味着“acc_container”和“block”都应用于元素喜欢 <div class="acc_container block another-class">

.acc_container .block - 意思是：每个元素都带有“block”类，里面有“acc_container”类

例如： <div class="acc_container"> <p class="block">...

【讨论】：

你能解释一下在我的 html 代码中，没有类似 2 的东西应用于同一个元素，但是为什么我可以将 .acc_container.block 添加到我的 css 中？
看起来这 2 个类是通过 JavaScript 代码应用的。所以你看不到两者都应用在 HTML 源代码中