原文： https://stackoverflow.com/questions/20322740/odd-css-syntax-class-icon-class-icon
I am going through someone else's CSS code at the moment and found something I have not seen before, nor am I able to find anything on W3C schools about these types of selectors. Google also doesn't return anything if I type in "class^="
Would appreciate it if someone could shed some light on this please?
-----------------------------------------------------------------------
This is somewhat comprehensively covered here:
http://reference.sitepoint.com/css/css3attributeselectors
Quick summary:
[class^='icon-'] - classes starting with 'icon-' (eg. class='icon-blah blah') [class$='-icon'] - classes ending with '-icon' (eg. class='blah blah-icon') [class*='icon'] - classes containing 'icon' (eg. class='blah xxx-icon-blah')It's worth noting that this is a full string matching pattern not a partial matching pattern. So for example, the class:
<div class='mystyle-type'/>Will match to the selector [class^='mystyle'] but the class:
<div class='active mystyle-type'/>Will not match, because the string 'active mystyle-type' does not start with 'mystyle'.
This can be problematic with javascript that adds classes dynamically like jquery's 'addClass'.