CSS-结构选择器和伪类伪元素

1.结构选择器

1.后代选择器：可以选择一个元素的后代元素，包括儿子孙子

2.子元素选择器：通过某一个元素选中直接后代元素

3.并选择器：将相同的样式放在一起，类名直接用英文逗号分隔。

4.通配符选择器：*可以选中页面所有的标签。

注意：通配符选择器对页面所有的元素都会设置对应的样式，而实际上有很多元素默认是不带任何的样式的。

5.兄弟选择器：E+F:选中最近的一个“弟弟”元素，不选中自己

       E~F:选中所有的“弟弟”元素，不选中自己

2.伪类和伪元素

伪类：伪类选择元素基于的是元素的特性，由于状态是动态变化的，所以一个元素达到一个特定状态时，它就会得到一个伪类的样式；当状态改变时，它又会失去这个样式。

它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

伪元素：设计伪元素的目的：伪元素是对元素中的特定内容进行操作，去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

定位相关复习

（1）文档流：就是HTML的布局机制。块元素（block）独占一行，内联元素(inline)不独占一行。

（2）相对定位：就是相对于一个东西来定位。这个东西就是他本身。同时可以使用left、top、bottom、right来移动元素的位置。

注意：相对定位不会脱离文档流。

（2）绝对定位：找一个东西相对来绝对定位。这个东西有时什么呢！这个东西（element）必须设定position,并且定位方式非 static。再说直白一点。这个小鬼（element）定位可以是他爸爸、他爷爷、他太公。。。。（祖宗，body）中有钱（position: absolute）的或者当官的（position: relative，fixed）,就是不能是程序员（position: static或直接没有写定位）。

注意：绝对定位脱离文档流。一般使用“父相子绝”。

使用绝对定位设置top：0 和不设置top属性他们有区别么？

有区别。如果没有设置top属性。元素的位置和没有脱离文档流的位置一样。

（3）fixed定位：就是相对于浏览器窗口的定位。

 注意：使用了postion 属性，一般不使用margin，padding属性。