css-04

目录

属性选择器

属性选择器 *=,|=,$=,~=，^=区别

---

属性选择器

属性选择器

[title]：有title属性

属性和值选择器

[title=runoob]：

属性和值选择器-多值

[title~=hello]：title中包含hello

[lang|en]：lang属性中包含en

表单样式

input[type="text"] | input[type="button]

属性选择器 *=,|=,$=,~=，^=区别

 其中value须是完整单词：~=、 |=

拼接字符串类型的比较符号： *=、 ^=、 $=

1、attribute属性中包含value

[attribute~=value]：属性中包含独立的单词为value  例如：

[title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />

[attribute*=value]：属性中做字符串拆分，能拆出来value就行，如

[title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

2、attribute属性以value开头

[attribute|=value]：其中value必须是完整且唯一的单词或者以-分隔开，例如

[lang|=en]     -->  <p lang="en">  <p lang="en-us">

[attribute^=value]：属性中前几个字母是value就行，例如

[lang^=en]    -->  <p lang="ennn">

3、attribute属性以value结尾

[attribute$=value]：属性的后几个字母是value就行，例如

a[src$=".pdf"]