1、E[att^=value]属性选择器

E[att^=value] 属性选择器是指选择器名称为E的标签，且该标记定义了att属性，att属性值包含前缀为 value的子字符串。E是可以省略的，如果省略则可以表示匹配满足条件任意的标签。例如：div[id^=section]表示匹配包含id属性，且id属性值是以“section”字符串开头的div元素

  1. p[id^="one"]{
  2.     color:red;
  3. }
  4. <p id="one">1</p>        //变颜色
  5. <p id="two">2</p>        //没有变颜色
  6. <p id="one1">3</p>    //变颜色
  7. <p id="one2">4</p>    //变颜色
  8. <p id="two1">5</p>    //没有变颜色

2、E[att$=value]属性选择器

E[att$=value] 属性选择器是指选择器名称为E的标签，且该标记定义了att属性，att属性值包含后缀为 value的子字符串。E是可以省略的，如果省略则可以表示匹配满足条件任意的标签。例如：div[id^=section]表示匹配包含id属性，且id属性值是以“section”字符串结尾的div元素

  1. p[id$="one"]{
  2.     color:red;
  3. }
  4. <p id="one">1</p>        //变颜色
  5. <p id="aone">2</p>        //变颜色
  6. <p id="a">5</p>    //没有变颜色

3、E[att*=value]属性选择器

E[att=value] 属性选择器是指选择器名称为E的标签，且该标记定义了att属性，att属性值包含包含为 value的子字符串。E是可以省略的，如果省略则可以表示匹配满足条件任意的标签。例如：div[id=section]表示匹配包含id属性，且id属性值是以包含“section”字符串的div元素

  1. p[id*="one"]{
  2.     color:red;
  3. }
  4. <p id="one">1</p>        //变颜色
  5. <p id="aonea">2</p>        //变颜色
  6. <p id="aone">5</p>    //变颜色
  7. <p id="onea">2</p>        //变颜色