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)

发布了48 篇原创文章 · 获赞 3 · 访问量 885

猜你喜欢

转载自blog.csdn.net/procul/article/details/104537792