CSS class前後元素

Question

我有個簡單的問題

這兩個語句有什麼區別？

例：

.job-des li{ 
//you styles here 
} 

AND

li.job-des{ 
//you styles here 
} 

Answer 1

.job-des li{ 
//you styles here 
} 

在該組塊的代碼

li可以在任何地方在於一個elemenet，它的類job-des 像

<div class="job-des"> 
    <ul> 
     <li>This is selected as per the conditions </li> 
     <li>This is selected as per the conditions </li> 
     <li>and this one too </li> 
    </ul> 
</div> 

在此代碼

它會選擇所有li's這是在特定的類

在這

li.job-des{ 
//you styles here 
} 

只有

那些li's將被程式化，其班級給出.job-des

<div class="any class"> 
     <ul> 
      <li> i am not selected</li> 
      <li class="job-des">i am selected as per the conditions </li> 
      <li> and this one too is not selected </li> 
     </ul> 
    </div> 

Answer 2

首先是包含在具有類.job-des任何元件<li>元件，而第二個是任何<li>元素本身具有類.JOB -des

例如，第一個會碰到這個：

<div class='job-des'> 
    <ul> 
     <li>It hits me</li> 
    </ul> 
</div> 

而第二個會打這樣的：

<ul> 
    <li class='job-des'>It hits me</li> 
</ul> 

Answer 3

說明

首先 .job-des li{這將適用於LI這是.job-des類的孩子。

例

<div class="job-des"><li></li></div> 

二li.job-des {這將適用於LI有工作-DES類。

例

<li class="job-des"></li> 

Answer 4

.job-des li{ 
//This style will apply in li of the element have class .jobs-des 
} 

AND

li.job-des{ 
//This style will apply on li which have class .job-des 
}