css類說明符之前還是之後，不一致？

在我的樣式表以下修改的div適當：

div.idea { 
    margin: 0.1cm; 
    }

下列不：

.idea div { 
     margin: 0.1cm; 
}

然而，以下的不不修改我的主播：

a.idea { 
     color: Orange; 
}

和以下內容：

.idea a { 
     color: Orange; 
}

解釋？

來源

2012-08-02 Rob F

我其實也是。有時文件不足。 – 2012-08-02 12:52:57

div.idea意味着div帶班idea

.idea div意味着div與類idea

他們針對不同的元素。沒有看到你的HTML，就不可能解釋你爲什麼目睹你認爲不尋常的行爲。

來源

2012-08-02 09:40:34

CSS選擇器：

div.idea { ... // a div that has a class="idea" 
.idea div { ... // any div, that has a parent (or ancestor) that has a class="idea" 
a.idea { ... // an <a> element which has a class="idea" (<a class="idea">text</a>) 
.idea a { .. // an <a> element which has a parent (or ancestor) of any element type (not only div) which has a class="idea"

諮詢CSS selectors，尤其是class selectors

來源

2012-08-02 09:38:57 Rodik

+1爲參考鏈接。 – 2012-08-02 09:48:36

+1爲投票理由。 – Rodik 2012-08-02 09:50:02

的空間是非常重要的。空間意味着「孩子」。沒有空間意味着「和」。

所以：

div.idea：與類「理念」與父是一個div（上面的任何地方）

一個孩子：與類 idea

<DIV class="idea"></DIV>

div .idea一個div

<DIV> 
    <DIV class="idea"></DIV> 
</DIV>

來源

2012-08-02 09:39:07 Ariel

你不需要需要在使用類選擇器之前指定任何元素 - 它只是增加了一層特殊性。

你的第一個例子：

div.idea { 
    margin: 0.1cm; 
}

這首先選擇所有div元素，然後將它們限制與idea類元素。

你的第二個例子：

.idea div { 
     margin: 0.1cm; 
}

選擇與類idea所有元素，然後選擇所有這些元素的孩子。

兩個表達式等同於不同的東西：

div.idea選擇具有類想法
.idea div選擇idea元素是指div

實際上的孩子的div，空間讓你選擇子

來源

2012-08-02 09:39:12 jacktheripper

我明白了。我真的想知道哪些CSS樣式得到了繼承，哪些不是。這爲我解答。 – 2012-08-02 12:53:36

您的CSS選擇器假定以下內容

div.idea {餘量：0.1釐米;}

<div class="idea" id="iGetStyled">...

.idea DIV {餘量：0.1釐米;}

<div class="idea"><div id="iGetStyled">...

a.idea {顏色：橙色;}

<a class="idea" id="iGetStyled">...

.idea一個{顏色：橙色;}

<div class="idea"><a id="iGetStyled">...

id="iGetStyled"顯示哪些項目將被稱呼

來源

2012-08-02 09:39:25 Alex

css類說明符之前還是之後，不一致？

回答

相關問題