類如何在CSS文件中工作？

-16

我想弄清楚如何在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而不是其他東西？

來源

2014-11-05 Username

有在網絡上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>

來源

2014-11-05 17:43:31

類如何在CSS文件中工作？

回答

相關問題