说是进阶其实也就是自己学习样式表的一些记录，十年不看样式表发现理解差好多，当初用样式表无非就是为了实现一些特殊显示效果（比如图片倒影啊、全页黑灰：重大生产事故之类的），现在才理会到样式表主要用于表现样式的控制了。得益于某小哥的一句精辟话：超文本用于内容描述，样式表用于样式表现，而动态脚本（主指js之流）用于动作响应，只要真正理解这句话，也就等于理解高深武功心法了。约定下，粗体字内容为书写样式（有点像数学公式那样），具体书写就按你自己的代入即可。
回归，好好讲讲样式表的选择器：
样式表的选择器常见的有：类型选择器（也称元素选择器或简单选择器）、后代选择器、ID选择器和类选择器。
１、类型选择器（元素选择器）主要用于对指定的HTML标签类型进行样式设定，直接以 标签类型{样式属性：属性值;...} 来撰写；
２、后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其他两个选择器之间的空格表示，如 选择器1 选择器2{样式属性：属性值;...} 来撰写，表述的是对在选择器1元素或元素组里包含的选择器2类型的元素进行样式设定。
３、ID选择器就直接了，直接选择HTML标签中ID属性值为特定值的元素进行样式设定，用#号进行选择，表现为 #ID属性值{样式属性：属性值;...} 就可以了。但是由于整个页面中元素的ID属性一般是不允许重复的，所以选择起来有好处也有坏处，好处是直达目标，但是坏处可能就是同一类的如果样式一致你有可能要进行很多次ID选择才能统一样式。于是就有了相应的类选择器来解决这个问题了（有效减少ID选择器滥用啊）。
４、类选择器用于对指定类名的元素进行样式设定，使用.号前缀来选择，表现为 .类名{样式属性：属性值;...} ，对于类名的叫法，好的命名方法一般是“它们是什么”，而不是“它们的外观如何”来命名。比如 class="nav"就比class="redMenu"来得好，或是class="mainContent"就比class="leftContent"来得好。
５、再补一个，伪类选择器，这种选择的元素与标签的关系不仅仅在于标签的类型、ID属性值和类名，还与它的状态有关系，一般只能应用于锚元素（在传统应用中可以Focus的控件或是等等），一般是有状态的。如链接、表单元素等。一般的表现样式为 标签类型:状态字{样式属性：属性值;...} ，如a:link{color:blue;} a:visited{color:green;}就指定了链接的两种状态样式。常见的表单状态字有：hover、active、focus，IE6可能不支持focus（让IE6退休也是应该的），而IE7起在任何元素上都支持:hover。
另起一段讲下通用选择器，通用选择器可能是所有选择器中最强大却是最少使用的。像通配符一样，一选全选呐，样式有如 *{样式属性:属性值;...} 。例如，以下样式可以删除每个元素上默认的浏览器内边距和外边距：*{padding:0;margin:0}。
再讲讲高级点儿的选择器：子选择器、相邻同胞选择器、属性选择器。
１、子选择器，有别于后代选择器，后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。样式为 选择器1>选择器2{样式属性:属性值;...} 。避免误伤的好方法啊。同样是从IE7开始支持，但是在IE7中有一个小Bug，父元素和子元素之间不能有HTML注释，不然会出错滴（怎么出错？当然就是样式可能会失效咯）（再次声讨IE6，可以通过通用选择器来模拟，先在所有后代上应用子元素的样式，再用选择器覆盖子元素的后代上的样式，先定了儿子的样子，再把孙子的样子改回去，如#nav li{font-size:18em} #nav li *{font-size:16em}，这模拟就麻烦多了）。
２、相邻同胞选择器，样式为 选择器1+选择器2{样式属性:属性值;...} ，此时选择到的元素集合应该是同一个父元素下某个元素之后元素。（这个具体情况很不好说，先不表）。
３、属性选择器，顾名思义就是根据某个属性是否存在或属性的值来寻找元素。样式有如 选择器[属性]{样式属性:属性值;...}或选择器[属性="属性值"]{样式属性:属性值;...} ，这样选择的元素范围可能很小，但是可以实现一些意想不到的效果。
先写到这，有饭局。
２、相邻同胞选择器，
转载于:https://www.cnblogs.com/appwoo/archive/2012/01/13/2321873.html
相关资源：JAVA上百实例源码以及开源项目