CSS2属性选择器和css3选择器的用法和区别

兄弟们,这是我第一次写博客,希望对进来的人有用,写的不好别喷哈,谢谢.

css2属性选择器:

　　1.[attribute]

　　　　例子:   [title]

　　　　解释:   选择含有  title  属性的所有元素.  (<div title="nav"></div> 就会被选中)

　　2.[attribute=value]

　　　　例子:   [title=piple]  

　　　　解释:   选择含有  title  属性并该属性的属性值为 piple 的所有元素.  (<div title="piple"></div> 就会被选中)

　　　　　　　注意,写的时候  不要  写成  [title="piple"]

　　3.[attribute~=value]

　　　　例子:  [title~=piple]

　　　　解释:  选择含有  title  属性并该属性的属性值中含有  piple  单词的所有元素.  (<div title="nav piple"></div> 就会被选中,  而<div title="nav  piples"></div> 不会被选中)

　　　　　　　注意:  是  title  的属性值中有 piple 这个单词, 而并非是 title 属性的某个属性值中包含 piple 字符串.

　　4.[attribute|=value]

　　　　例子:  [title|=en]

　　　　解释:  选择含有  title  属性并该属性的属性值中包含以 en-  开头的单词(该单词一定要是第一个属性值)

　　　　　　   或者单独含有 en  单词的所有元素.  (<div title="en"></div> ,<div title="en-p"></div> ,<div title="en-p piple"></div> 就会被选中)

　　　　　　　　　　　　　　　　　　　　　　　　(<div title="en piple"></div>, <div title="nav en"></div> , <div title="nav  en-ss"></div> 不会被选中)

css3属性选择器:

　　1.[attribute^=value]

　　　　例子:  [title^=piple]

　　　　解释:  选择含有  title  属性并该属性的属性值的第一个单词必须是以  piple  字符串开头的单词

　　　　　　   或者第一个单词是  piple 单词

　　　　　　　或者只含有  piple 单词

　　　　　　　或者只含有以 piple 字符串开头的单词的所有元素.

　　　　　　　(  <div title="piple"></div>,

　　　　　　　　<div title="piples"></div>,

　　　　　　　　<div title="piple sss"></div>,

　　　　　　　　<div title="pipless ssds"></div> 

　　　　　　　　就会被选中)

　　2.[attribute$=value]

　　　　例子:  [title$=piple]

　　　　解释:  选择含有  title  属性并该属性的属性值的最后一个单词必须是以  piple  字符串结尾的单词

　　　　　　   或者最后一个单词是  piple 单词

　　　　　　　或者只含有  piple 单词

　　　　　　　或者只含有以 piple 字符串结尾的单词的所有元素.

　　　　　　　(　<div title="piple"></div>,

　　　　　　　　 <div title="tttpiple"></div>, 

　　　　　　　　<div title="ssss piple"></div>, 

　　　　　　　　<div title="ddd dfadpiple"></div> 

　　　　　　　　就会被选中)

　　3.[attribute*=value]

　　　　例子:  [title*=piple]

　　　　解释:  选择含有  title  属性并该属性的属性值的中的某一个单词必须包含  piple  字符串的单词

　　　　　　   或者所有单词中有一个单词是  piple 单词

　　　　　　　或者只含有  piple 单词

　　　　　　　或者只含有包含 piple 字符串的单词的所有元素.

　　　　　　　(<div title="piple"></div>, <div title="ssspiples"></div>, <div title="sss piple sss"></div>, <div title="ssss dadpipless ssds"></div> 就会被选中)

 

区别:  

　　主要是 [attribute~=value] 与 [attribute*=value] 以及 [attribute|=value] 与 [attribute^=value]  两组属性选择器的区别.

　　他们的区别是  css2 的属性选择器以  单词为单位,  css3 的属性选择器以字符串为单位来计算.