选择器 --> 选择元素进行样式实现.
属性选择器
可快速选取指定元素进行样式应用.
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"]
<a href="#1" title="in the way" target="_blank">1</a>
a[title~="the"] { color:red; } 表示选取的元素值中是the或者词表中含有the 即可.
注意和第二个区分开,这个就是在属性值(可以是单个词或者词句)中搜寻到一个词匹配value即可选定.
4. 指定属性名,选中属性值为value开头的元素.
E[attr^"value"]
<a href="#1" title="begin hahaha" target="_blank">1</a>
<a href="#2" title="end hahaha" target="_blank">2</a>
a [title^="end"] {background : blue; } 表示选取title 值开头为 end 的a元素进行样式应用.
注意不要丢了^ 符号.
5. 指定属性名,属性值以value结尾的元素.
E[attr$="value"]
<a href="#1" title="This is a great beginning" target="_blank">1</a>
<a href="#2" title="This is a great end" target="_blank">2</a>
a[title$="beginning"]{ background:orange; }
选取值为beginning的元素进行样式应用.
6. 指定属性名,在属性名中指定值含有指定value即选定.
E[atte*="value"]
<a href="#1" title="Youth means limitless possilities." target="_blank">1</a>
a [title$="limit"] { background=gray;} 选中value含有limit 字符的元素进行样式应用.
注意和 ``` E[attr~="value"] 第三个进行区分,第三个选取的是值中某个词是value,而这个是词中只要含有value 即可.
7. 指定属性名,属性值是value或者value-开头的值.
E[attr|="value"]
<a href="#1" title="tangsen-one hahaha" target="_blank">1</a>
<a href="#2" title="tangsen hahaha" target="_blank">2</a>
a [title|="tangsen"] { color:yellow; }选中以上两种情况.
注意 |
是enter键上面那个英文状态下按shift出现的.