选择器(2)

选择器 --> 选择元素进行样式实现.

属性选择器

可快速选取指定元素进行样式应用.

1. 只选取属性名

E[attr]

a[href] { background: red; } 表示选择了使用了href属性的a标签进行此样式实现.


2. 选取属性名并且有确定值value.

E[attr="value"] 

a [href="#1"] { background:blue; }

指定选取元素有特定属性值value应用样式的情况.

属性值必须确定和value一致才行不可多不可少.


3. 选取属性名并且值有value即可.

E[attr~="value"]

1

a[title~="the"] { color:red; } 表示选取的元素值中是the或者词表中含有the 即可.

注意和第二个区分开,这个就是在属性值(可以是单个词或者词句)中搜寻到一个词匹配value即可选定.


4. 指定属性名,选中属性值为value开头的元素.

E[attr^"value"]

1
2

a [title^="end"] {background : blue; } 表示选取title 值开头为 end 的a元素进行样式应用.

注意不要丢了^ 符号.


5. 指定属性名,属性值以value结尾的元素.

E[attr$="value"]

1
2

a[title$="beginning"]{ background:orange; }
选取值为beginning的元素进行样式应用.

6. 指定属性名,在属性名中指定值含有指定value即选定.

E[atte*="value"]

1

a [title$="limit"] { background=gray;}  选中value含有limit 字符的元素进行样式应用.

注意和 ``` E[attr~="value"] 第三个进行区分,第三个选取的是值中某个词是value,而这个是词中只要含有value 即可.

7. 指定属性名,属性值是value或者value-开头的值.

E[attr|="value"]

1
2

a [title|="tangsen"] { color:yellow; }选中以上两种情况.

注意 | 是enter键上面那个英文状态下按shift出现的.

你可能感兴趣的:(选择器(2))