首页 > 技术文章 > CSS 新增选择器和老选择器之间的区别

hero8377 2013-06-22 11:57 原文

  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都可以。

推荐阅读