风格方法论（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）

回答

相关问题