風格方法論（CSS）

我注意到應用樣式的幾種不同方式，並試圖理解它們之間的差異，如果可以與另一種方式交換使用，也是如此。如果是這樣，這是一個更好的方法，下面是否有更新的標準？風格方法論（CSS）

.rootClass { /*Styles for rootClass */ } 

.rootClass > a > .classA.someClass, .rootClass > a > .classB.someClassB { 
    /* Styles */ 
} 

.rootClass a.classA.someClass, .rootClass a.classB.someClassB{ 
    /* Styles */ 
}

它也將有助於理解之間的差異：

.rootClass .classA.someClass, .rootClass .classB.someClassB{ 
     /* Styles */ 
    } 

    .rootClass.classA.someClass, .rootClass.classB.someClassB{ 
     /* Styles */ 
    }

假設我有以下的HTML哪些樣式可以在上面之中可能適用？

HTML1：

<div class="rootClass"> 
<a class="classA someClass">Test</a> 
</div>

HTML2：

<div class="rootClass"> 
    <p class="classA">Some text here</p>  
     <span> 
      <p class="classA">More text here</p> 
     </span> 
</div>

來源

2014-03-26 Loser Coder

我不明白你的問題他們都意味着不同的東西？請參閱：http://stackoverflow.com/questions/4459821/css-selector-what-is-it –

它們的含義都不同，具體取決於您的標記，例如，在第一個示例中，您的標記*可能*看起來像這樣：'

'，在第二個例子中，你的標記可能看起來像這樣：'

' –

@NickR選擇器在字面上意思是不同的東西，儘管取決於你的標記，它們可能應用完全相同。選擇器並不是實現同一事物的不同方式，它們只是不同而已。 –

有很多方法使用特異性應用樣式。這些恰好是3種不同的方式。沒有更好的辦法。他們都有自己的用途。請注意，所有3個示例都將樣式應用於不同的對象。這些不是3種可以將相同樣式應用於相同對象的可互換方式。

.rootClass {/ *的樣式rootClass * /}

上面施加樣式與該類的任何元件。例如：<div class="rootClass">

.rootClass > a > .classA.someClass, .rootClass > a > .classB.someClassB { 
    /* Styles */ 
}

上面應用了具有更多特異性的樣式。它僅適用於具有兩個類的對象，它是a的直接後代，它是具有特定類的對象的直接後代。這比前面的例子更具體。例如：<div class="rootClass"><a><div class="classA someClass">

.rootClass a.classA.someClass, .rootClass a.classB.someClassB{ 
    /* Styles */ 
}

以上是應用樣式錨是根類，也恰巧有兩個特定類別的子標籤。例如：<div class="rootClass"><div><div><a class="classA someClass">

來源

2014-03-26 16:57:07

downvoters？說明？ –

我認爲這是一個很好的解釋。您可能需要向OP原始問題添加註釋，這些註釋不是不同的符號樣式，而是不同的實際規則。 –

@MikeBrant是的。好點子。還添加了示例標記。 –

風格方法論（CSS）

回答

相關問題