【css】选择器/结构和重叠

选择器：

1 选择器分组：
逗号告诉浏览器，规则中包含两个不同的选择器，如果没有这个逗号，样式将应用到这两哥选择器所引用的元素。

2 类选择器还是id选择器？
可以为任意多个元素指定同一个类名，但是id选择器仅会使用一次。
不同于类选择器，id属性不能结合使用，因为id属性不允许以空格分隔的词列表。
class与ID名之间的另一个区别是，如果你想确定应该向下一个给定元素应用哪些样式，ID将包含更多含义。
3 属性选择器
共四种类型的属性选择器
（简单属性选择器）：h1[class]:希望选择有某个属性的元素，而不论该属性的值是什么。
（根据具体属性值选择）：h1[class=”barren”]
(根据部分属性值选择)：img[title~=’bar’]//包含该值
img[title*=’bar’]//包含子串‘bar‘
4 后代选择器：规则左边的一端包括两个或者多个用空格分隔的选择器。

5 选择子元素：在某些情况下，可能并不想选择任意一个后代元素，而是希望缩小范围，只选择另一元素的子元素。
h1>strong:子选择器限制为只匹配树中直接相连的元素。

6 选择相邻兄弟元素：这表示为+、
选择紧接在后面的兄弟元素，这两个元素需有共同的父元素。

7 伪类选择器
静态伪类
a:link//未访问
a:visited//已访问
动态伪类
:focus:指示当前拥有输入焦点的元素。
:hover:指示鼠标指针停留在哪个元素上
:active:指示被用户输入激活的元素。例如：鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接

link-visited-focus-hover-active

动态伪类可以应用到任何元素
避免使用动态伪类改变布局。

选择作为某元素第一个子元素的em元素：em:first-child

注：所有伪元素都必须放在出现该伪元素的选择器的最后面。
8 .伪元素选择器
设置之前和之后元素的样式：
h2:before{
content:’xxx’;color:silver
}
h2:after{
}

结构和层叠：

对于选择器中给定的各个id属性值：加0，1，0，0
对于选择器中给定的各个类属性值，属性选择或伪类，加0，0，1，0
对于选择器中给定的各个元素和伪元素，加0，0，0，1

内联样式特殊性1，0，0，0。

注：不能继承的属性：border;大多数框模型属性（外边距，内边距，背景和边框）继承的值根本没有特殊性，甚至连0特殊性都没有。因此要避免不加区别的使用通配选择器。