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 的属性选择器以字符串为单位来计算.
