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

属性选择器

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

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出现的.

选择器（2）