css - 要素の前後の CSS クラス

Question

簡単な質問があります

これら2つのステートメントの違いは何ですか?

元：

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

と

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

Answer 1

説明

まず 、これはクラスの子である.job-des li{に適用されます。LI.job-des

例

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

第二 に、これはジョブ・デス・クラスを持つli.job-des {ことに適用されます。LI

例

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

Answer 2

1 つ目は<li>class を持つ任意の要素に含まれる要素で.job-desあり、2 つ目は<li>それ自体がクラス .job-des を持つ任意の要素です。

たとえば、最初のヒットは次のようになります。

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

2番目はこれにヒットします：

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

このコードのチャンクで

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