CSS权威指南（二）选择符

1.样式的基本规则

     CSS的一个核心优势就是可以为文档中某种种类的元素全部应用相同的样式规则。CSS样式便于修改和编辑，而且能应用到指定的所有文本元素上。

（1）元素选择符

  即直接使用元素的名称进行选择，类似于p{ font-size:10px; }。元素选择符是最基本的选择符。

2.群组

（1）群组选择符',',群组选择符就是说相同规则选择符，也就是是说使用','将两个选择器分隔，就代表这两个选择器应用了相同的规则。

html,body {
    font-size: 10px;
    font-height: 600;
}

（2）通用选择符*,这个选择符会匹配所有元素。

ps.通常不建议使用

（3）类选择符'.'+class名称，类选择符主要是通过html标签上设置的class属性值进行匹配。

<div class="main"></div>

.main {
	background: #ffffff;
	font-size: 16px;
}

（4）id选择符'#'+id名称，id选择符主要是通过html标签上设置的id属性值进行匹配。

ps.id选择符的优先级高于class选择符

（5）属性选择符元素选择符[属性名称="属性值"]（="属性值"部分可省略），属性选择符是一种带有内容匹配性质的选择符，他可以匹配带有某种属性的元素，也可以匹配带有某种元素，且属性值为一个具体值的元素。比如p[class]、input[disabled="disabled"].同时属性选择符也支持部分属性匹配。

（6）后代选择符父选择符 后代选择符，后代选择符寄选择父元素的后代元素，它的语法规则是使用空格隔开两个选择器，代表选择位于最前方元素的后代元素。

<div>
    <span></span>
</div>

div span {
	font-size: 16px;
}

（7）子选择符父选择符 > 子选择符,子选择符和后代选择符稍微有些区别，子选择符只选择当前父元素的直接后代子元素。

（8）相邻同胞选择器前选择符 + 后选择符，相邻同胞选择器可以选择与前面一个元素相邻的元素。

（9）后续同胞选择器前选择符 + 后选择符，后续同胞选择器主要是选择同一父元素下，后续的第一个匹配的选择符。

（10）伪类选择器:选择符名称/::选择符名称，与其他选择器不同，CSS具有非常丰富的伪类选择器。从功能上来看，主要可以分为：内容伪类、行为伪类、逻辑伪类等。比较常见的有::after,::before,:hover等。