类如何在CSS文件中工作？

问题描述：

我想弄清楚如何在CSS文件中工作的类。这里有3例类：类如何在CSS文件中工作？

container 
inner_content 
text_section

这里有三种方式我见过那些在CSS中列出：

.container.inner_content.text_section { - 这其中有类之间没有空格。

.container .inner_content .text_section { - 这个分类之间有空格。

.container li.inner_content - 这个有li扔到它的中间。

我试图找出什么是有空间或类之间没有空格之间的区别。另外，如果li或div等东西位于类的中间，是否告诉浏览器只使用该类，如果是li或div而不是其他东西？

有在网络上umptillion教程讲解CSS选择器是如何工作的。 -1 – j08691 2014-11-05 17:37:55

像其他人一样会说：RTFM。在询问SO之前，至少要麻烦讲授基本知识。 – AlexL 2014-11-05 17:39:42

答

在你的第一个例子：

.container.inner_content.text_section

匹配了所有三类

.container.inner_content.text_section { 
 
    color: red; 
 
}

<div class="container inner_content">one class</div> 
 
<div class="container inner_content">two classes</div> 
 
<div class="container inner_content text_section">all three classes</div>

你的第二个例子中的任何元素是完全不同的：

.container .inner_content .text_section

匹配，其与.container类的元素的后代，并且还与.inner_content类（即：一个孩子，或儿童的儿童，等等）：后代的元素中的任何元素

.container .inner_content .text_section { 
 
    color: red; 
 
}

<div class="container"> 
 
    not this 
 
    <div class="inner_content"> 
 
    not this 
 
    <div class="text_section">child</div> 
 
    </div> 
 
</div>

而在你的最后一个例子：

.container li.inner_content

匹配了inner_content类，并且是与.container类元素的孩子li元（假设ul元素）：

.container li.inner_content { 
 
    color: red; 
 
}

<ul class="container"> 
 
    <li>1</li> 
 
    <li class="inner_content">2</li> 
 
    <li>3</li> 
 
</ul>

类如何在CSS文件中工作？

相关推荐