CSS的基本语法

选择器：通过选择器可以选中页面中的一组元素，然后为其设置样式

①元素选择器：根据标签名，选中页面中的指定元素

语法：标签名{ } 例子：div{}   p{}    h1{}

②id选择器：根据元素的id属性值选中一个唯一的元素

语法：#id {}  例子：#box1{}   #hello{}

③类选择器：根据元素的class属性值，选中一组元素

语法：.class{}   例子：.hello{}   .box{}

④通配选择器：选中页面中的所有元素

语法：*{}  通配选择器的性能比较差，尽量避免使用

⑤并集选择器：可以同时选中符合多个选择器的元素

语法：选择器1,选择器2,选择器N{}  例子：div,p,#box,.hello{}

⑥交集选择器：可以选中满足多个条件的元素

语法：选择器1选择器2选择器N{}  例子：p.hello{}

⑦后代元素选择器：选中指定元素的指定后代元素

语法：祖先元素 后代元素{} 例子：div span {}  div p{}

⑧子元素选择器：选中指定元素的指定子元素

语法：父元素 > 子元素 {}  例子：div > span {}   div > p{}

声明块：声明块中实际上就是一个一个CSS声明

声明每一个CSS声明都是一个样式，实际上就是一个名值对的结构

名和值之间使用:链接

:左边是样式的名字

:右边是样式的值

每一个声明以;结尾

例子color:red;   font-size:20px;

元素之间的关系

父元素：直接包含子元素的的元素叫做父元素

子元素：直接被父元素包含的元素叫做子元素

祖先元素:直接或间接包含后代元素的元素叫做祖先元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素叫后代元素，子元素也是后代元素 语法：祖先元素 后代元素{}

兄弟元素：拥有相同父元素的元素叫做兄弟元素

块元素和内联元素

块元素：块元素会独占页面中的一行，无论他的内容的多少；一般使用块元素对页面进行布局

常见的块元素div、p、h1~h6

内联元素：内联元素只占用自身的大小，不会独占一行；内联元素也叫行内元素（inline）；一般内联元素都是用来为文本来设置效果

常见的内联span、a、img

（包裹规则：一般都是使用块元素去包裹内联元素，而不会使用内联去包裹块元素；a元素可以包含任意元素，除了a本身；p元素不能包含任何块元素）

伪类和伪元素：伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置

:link表示一个普通的链接（未访问过的链接）

:visited表示访问过的链接

:hover鼠标移入的链接，也可以为其他元素设置hover【在IE中不支持hover和active在a标签以外的标签使用】

:active正在被点击的链接，也可以为其他元素设置active

:focus表示元素获取焦点的状态，一般用于文本框

::selection表示内容被选中的状态；在火狐中使用::-moz-selection来代替

:first-letter表示第一个字符 例子p:first-letter{ background-color:yellow;}

:first-line表示文字的第一行

:before选中元素的最前边；一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容 例子p:before{ content:"1111"; color:blue;}

:after选中元素的最后边；一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容

（注:link、:visited、:hover、:active的优先级是一致的，且在使用的过程中顺序必须是这四个顺序）