CSS 新增选择器和老选择器之间的区别

1. 首先看 ～符号 p[class~="main"] {background:yellow;} 这个的意思是class里含用单独叫main的类，main必须作为一个整体。_main、main_、-main、main-、ssmain、mainss都无效，只能是独立的main。
2. 看看新增的 *符号 p[class*="main"]{background:yellow;} 这个的意思是class里只要包含main就可以匹配，main可以作为部分。_main、main_、-main、main-、ssmain、mainss都有效。
3. 看 |符号 p[class|="main"] {background:yellow;} 这个的意思是class里只有main的类或者是以main开头加上“-”符号的对象。_main、main_、-main、ssmain、mainss都无效。就只有<p class="main">还有<p class="main-ss">有效。
4. 看看新增的 ^符号 p[class^="main"]{background:yellow;} 这个的意思是class里只要是main或者是以main开头的就可以匹配。main_、main-、mainss都有效。
5. 看看新增的 $符号 p[class$="main"]{background:yellow;} 这个的意思是class里只要是main或者是以main结尾的就可以匹配。_main、-main、ssmain都有效。

　　以上2、4、5 对应的*、^、$都只针对至少IE7或者以上版本。当然Firefox2.0，Opera9.2,Safari和Chrome都可以。