本文从不是很专业的角度记录一下css选择器。详细的请参见w3school中css选择器。

有哪些选择器？元素选择器，类选择器，ID选择器，属性选择器，*自身选择器，后代选择器，子元素选择器，*后置相邻兄弟选择器，伪类，伪元素。

这些选择器的详细信息，这里不赘述，看上面的w3school。

如果要对多组元素应用同一样式，可以使用“,”将各组隔开。

如果要选择某类元素的后代，使用空格，选择其子元素使用“>”。

选择某个（些）元素的后的相邻兄弟元素，使用“+”，称为“后置相邻兄弟选择器”应该更加妥当。

而如果要选择某类元素（如p）中的某一个（些），假设要选中的那个有class=”clsA”，你可以使用p.claA。

注意：p.clsA之间没有空格，如果存在空格则变成了后代选择了，也就是选择p标签的后代中拥有clsA的元素。这种选择方式，我称为自身选择器。这种选择方式目前发现只能应用于使用类选择器的地方。

另外一个例子，.clsA.clsB。这也是自身选择器，比较有意思的地方，首先这两个类名被应用于同一个元素，其次这两个类名没有先后顺序，没有紧密要求（你可以在clsA和clsB中插入任意多个其他的类名）。

伪类实际上跟自身选择器有些类似，不过表示形式不同，而且被规定为就那么几个。像p:first-child，可以解释为：第一个作为后代元素的p。而p>i:first-child，可以解释为：第一个作为p子元素的i。

伪类和伪元素，以及类，都是对选择的元素本身或者文本应用样式。

另外，一些优先级的问题：

1、样式引入优先级。与当前展示的文档关系越紧密优先级越高。优先级从左到右，越来越低。

标签中的style -> head中的style -> 外部文件（link） -> 浏览器默认

2、样式覆盖优先级。选择器对要选择的元素越准确，优先级越高。优先级从左到右，越来越低。

标签中的style -> id选择器 -> 类选择器 -> 标签选择器

更加复杂的环境，需要仔细分析，样式覆盖优先级仅供参考。