CSS3 属性选择器 结构伪类选择器 伪元素选择器 代码状态选择器

属性选择器用法

 

E[att]                  选择具有att属性的E元素

E[att="val"]        选择具有att属性且属性值等于val的E元素（属性等于值）

E[att^=“val”] {}  选择的是:即是这个属性 且值以val开头的E元素（以某个值开头的）

E[att$=“val”] {} 选择的是:即是这个属性 且值以val结尾的E元素（以某个值结尾的）

E[att*=“val”] {}  选择的是:即是这个属性 且值中含有val的E元素（任意位置中的值）

 

标签选择器权重为1   类选择器，属性选择器，伪类选择器权重为10

 

 

结构伪类选择器

标签名::first-letter{}   选择第一个字

标签名::first-line{}   选择第一行

标签名::selection{}  选中

标签名::before{  content:"内容" }   在前面插入内容

标签名::after{   content:"内容" }    在后面插入内容

 

伪元素选择器

::before{content="要插入的内容"} 在元素内部的前面插入内容

::after{content="要插入的内容"}    在元素内部的后面插入内容

、

 

代码状态选择器(存在于表单中使用)

获取焦点

input：focus

 

选择被选中的单选框 多选框

input:checked

 

选择 所有未启动的表单元素disabled

input:disabled

 

选择了 所有启动的表单元素 enabled

input:enabled

 

选择内容为空的元素

input:empty

 

除了selector选择器的元素

input:not(selecytor)