css初识和css选择器

一.css是什么

　　css(cascading style sheet)定义如何显示HTML元素,给HTML设置样式,显得更为美观.

二.css的引入方式

　　1.行内引入

　　　　在标签中添加一个style是属性,属性值就是设置的样式

　　2.内接引入

　　　　在head标签中添加一个style标签,在标签内写要设置的样式

　　3.外界引入

　　　　在head标签中添加link标签,href中指定要导入的css样式文件路径,在css文件中写样式

三.css基础选择器

　   1.标签选择器

　　　　直接写标签名{}  eg:div{}

　　 2.id选择器

　　　　#id{}

　　3.class选择器

　　　　.class{}

四.高级选择器

　　1.子类选择器

　　　　div>p{},选择的是前一级标签div的子标签p

　　2.后代选择器

　　　　div p{},选择的是div标签中的后代子标签p

　　3.并集选择器

　　　　div,p{},选择多个标签,用逗号隔开

　　4.交集选择器

　　　　div.class{},选择div标签下的class类标签

　　　  div#id{},选择div标签下的id标签

　　5.通用选择器

　　　　*{},选择所有的标签

　　6.属性选择器

　　　　    [属性名]　　带这个属性名的标签

　　　　[属性名="匹配的属性值"]　　符合匹配属性的标签

　　　　[属性名^="匹配的属性值"]　　符合以这个属性值开头的标签

　　　　[属性名$="匹配的属性值"]　　符合以这个属性值结尾的标签

　　　　[属性名*="匹配的属性值"]　　包含这个属性值的标签

　　7.伪类选择器

　　　　a标签中的四种状态:

　　　　　　未被访问过的链接　　a:link{}

　　　　　　访问过的链接　　a:visited{}

　　　　　　鼠标悬浮链接　　a:hover{}

　　　　　　鼠标点击链接　　a:active{}　　

　　　　ul标签中的伪类选择器

　　　　　　选择第一个孩子　　ul li:first-child{}

　　　　　　选择最后一个孩子　　ul li:last-child{}

　　　　　　选择指定的孩子　　ul li:nth-child(n){}

　　　　p标签中方的伪类选择器

　　　　　　选择第一个字符　　p:first-letter{}

　　　　　　在标签前添加一个内容　　p:before{}

　　　　　　在标签后添加一个内瓤　　p:after{}

五.选择器的优先级　　

　　1.继承性:子标签可以继承父标签的样式

　　2.层叠性:(选择器权重一样的时候)后添加的样式会覆盖前边的样式

　　3.权重:!important>内联>id>类>标签