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

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

css2属性选择器:

　　1.[attribute]

　　　　例子:   [title]

　　　　解释:   选择含有  title  属性的所有元素.  (

 就会被选中)

　　2.[attribute=value]

　　　　例子:   [title=piple]  

　　　　解释:   选择含有  title  属性并该属性的属性值为 piple 的所有元素.  (

 就会被选中)

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

　　3.[attribute~=value]

　　　　例子:  [title~=piple]

　　　　解释:  选择含有  title  属性并该属性的属性值中含有  piple  单词的所有元素.  (

 就会被选中,  而

 不会被选中)

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

　　4.[attribute|=value]

　　　　例子:  [title|=en]

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

　　　　　　   或者单独含有 en  单词的所有元素.  (

,

,

 就会被选中)

　　　　　　　　　　　　　　　　　　　　　　　　(

,

,

 不会被选中)

css3属性选择器:

　　1.[attribute^=value]

　　　　例子:  [title^=piple]

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

　　　　　　   或者第一个单词是  piple 单词

　　　　　　　或者只含有  piple 单词

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

　　　　　　　( 

,

　　　　　　　　

,

　　　　　　　　

,

　　　　　　　　

 

　　　　　　　　就会被选中)

　　2.[attribute$=value]

　　　　例子:  [title$=piple]

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

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

　　　　　　　或者只含有  piple 单词

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

　　　　　　　(　

,

　　　　　　　　 

, 

　　　　　　　　

, 

　　　　　　　　

 

　　　　　　　　就会被选中)

　　3.[attribute*=value]

　　　　例子:  [title*=piple]

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

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

　　　　　　　或者只含有  piple 单词

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

　　　　　　　(

, 

, 

, 

 就会被选中)

 

区别:  

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

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

 

转载于:https://www.cnblogs.com/foreveronlymiss/p/css.html