【CSS3】选择器

● 属性选择器
E[att^ = "val"] // 选择E元素中以att属性值val开头的匹配元素
E[att$ = "val"] // 选择E元素中以att属性值val结尾的匹配元素
E[att* = "val"] // 选择E元素中以att属性值包含字符val的匹配元素

● 根选择器
：root 即选中html标签元素

● 否定选择器
div:not([id = "box"])
//选中除id为box外其其它div下的子元素

● 空选择器
div:empty
// 选择没有任何内容的元素（包括没有空格）
其选中的是html当前文档中div标签类型的所有空div元素

● 目标选择器
目标:target
//与a标签配合使用
例：点击a标签将设置div背景色为红色
#div:target{ background:red; }
<div id = "div">
<a href="#div">div</a>
</div>

● 长子选择器
div:first-child
//选择div下的第一个子元素

● 末子选择器
div:last-child
//同上可得选中尾子元素
注意：同个容器下如存在不同类型的元素则长子末子选择器前后如果有非选择类型的元素则无法选中要选择的类型元素
例：
<div>
<div>0</div>
<p>1</p>
<p>2</p>
</div>
div > p:first-child{}
div > p:last-child{}
则长子选择器失效，同理如果尾部有其它标签则末子选择器也会失效

● 正向多选择器
nth-child(n) // n可以是整数也可以是表达式 表达示中n从0开始计算 n为整数时从1开始计算0不选中任何元素 n也可以是关键字 （odd 奇数 even 偶数）
例：
ol > li:nth-child(2n-1){background:red;}
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ol>
则选择奇数行 1 3 5 7 9
如2n则选择偶数行 2 4 6 8 10
n为整数则只选择从上往下数的第n行
选择多行 -n+5 选择5行

● 反向多选择器
:nth-last-child(n)
//同上，方向相反，从下往上选择

● 类型长子选择器
span:first-of-type
//选择父元素下第一个span类型的标签
注意：如果父级下第一个元素非span标签则不选择任何标签元素（即不起作用）

● 类型末子选择器
span:last-of-type
//同上，选择最后一个span类型标签
注意：最后一个标签非span则不选择任何标签元素

● 正向类型选择器
span:nth-of-type(n)
//选择同一父级下的第n个span标签元素 从上往下计算
注意：与nth-child(n)类似，但其只选择同类弄元素，若n的目标元素非同类型元素则不生效

● 反向类型选择器
span:nth-last-of-type(n) //同上，方向相反

● 唯一选择器
:only-child
//选择在同一父级元素下且仅有一个子元素的元素
例：
div div p:only-child{}
<div>
<div>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
</div>
注意：则仅选择只有一个p标签元素的子元素

● 唯一类型选择器
:only-of-type
//同上，匹配加上了类型，即唯一一个该类型的子元素被应用样式

● 表单状态选择器
enabled
// 在web表单中有些表单元素具有可用（enabled）与不可用（disabled）状态，如密码框文本框复选框等。默认情况下这些表单元素的状态是enabled可用状态。
例：
input:enabled{}
<input type = "text"/>
<input type = "text" disabled/>
则选中第1个文本框

disabled
//既然有enabled肯定也有与之相反的状态选择器
例：
input:disabled{}
<input type = "text"/>
<input type = "text" disabled/>
则选中第2个文本框

● 选中状态选择器
checked
//在表单元素中还有复选框单选框等元素，其具有选中与未选态
例：
input:checked{}
<input type = "checkbox"/>
注意：当用户操作点击选中时会应用选中样式

● 只读状态选择器
:read-only{}
//选择只读状态的元素并为之设置样式
即元素中设置了 readonly = "readonly"

● 非只读状态选择器
:read-write{}
与只读相反，即选中非只读状态的相关元素

以下为伪元素选择器--------------------------------------------------------------------------------------------------------------

● 文本状态选择器
::selection
通常网页中文本被鼠标选中会有白字蓝底的样式显示选中文本段，此选择器即选中被选中的文本并可通过此伪元素为选中文本设置样式
例：
div::selectioin{color:blue; background:red;}
<div>选中文本显示蓝字红底</div>

● 内容插入选择器
::before{}
在元素前插入内容
例：
p::before{content:"123"; color:red; background:blue;}
<p>abc</p>
则在p标签前插入红字蓝底的123

::after{}
在元素后插入内容，与before插入位置相反