如何使用CSS选择器

Question

什么是CSS选择器（例如，+）以及我们如何使用它们？是否有所有选择器的列表？与相关来源的链接也可以。

Answer 1

在CSS specifiction (here CSS 2.1)，section 5 Selectors。

具体来说，+被称为相邻的兄弟选择器：

  

5.7相邻兄弟选择器

     

相邻的兄弟选择器具有以下语法：E1 + E2，其中E2是选择器的主题。如果E1和E2在文档树中共享相同的父级并且E1紧接在E2之前，则选择器匹配，忽略非元素节点（例如文本节点和注释）。

     

因此，以下规则规定当P元素紧跟在MATH元素后面时，它不应缩进：

math + p { text-indent: 0 } 

     

下一个示例减少了分隔H1和紧随其后的H2的垂直空间：

h1 + h2 { margin-top: -5mm }   

     

以下规则与前一个示例中的规则类似，只是它添加了一个类选择器。因此，只有当H1具有class =“opener”时才会出现特殊格式：

h1.opener + h2 { margin-top: -5mm }   

您可能也对CSS 3 selectors感兴趣。

Answer 2

你在谈论选择者吗？如果是这样，它们用于指定应该应用以下规则的元素。见http://www.w3.org/TR/CSS2/selector.html

Answer 3

它们被称为CSS选择器（您使用的特定选项是“相邻的兄弟选择器”），您可以在the Mozilla docs阅读更多关于它们的信息。

Answer 4

我怀疑你在谈论选择器，在这种情况下你应该阅读Selectutorial（可能还有Forgotten CSS selectors）以及CSS2 specs和CSS3 specs主题。