Question

我有一个简单的问题

这两个陈述有什么区别？

前：

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

和

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

Answer 1

<强>解释

<强>第一 .job-des li{这将适用于LI类.job-des的孩子。{/ 1>

示例

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

第二次 li.job-des {这将适用于有职业类的LI。

示例

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

Answer 2

第一个是<li>元素包含在任何具有类.job-des的元素中，而第二个元素是任何<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{
 //This style will apply in li of the element have class .jobs-des
 }

和

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

Answer 4

.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>

元素前后的CSS类

4 个答案: