CSS3新增属性（1）

CSS3新增属性（1）

一、CSS3属性选择器

E[attr] ----- button["disabled"] 选择具有attr 属性的E元素

E[attr="XX"] ----- input[type="text"] 选择具有attr 属性且属性值等于XX的E元素

E[attr^="XX"] ----- input[type^="text"] 选择具有attr 属性且属性值以XX开头的E元素

E[attr$="XX"] ----- input[type$="text"] 选择具有attr 属性且属性值以XX结尾的E元素

E[attr*="XX"] ------ input[type*="text"] 选择具有attr 属性且属性值包含XX的E元素

tip：权重10

 

 

二、CSS3结构伪类选择器 

ul li :first-child{}   选择ul 下的第一个li 标签

ul li :last-child{}   选择ul 下的最后一个li 标签

ul li :nth-child(n) {}   选择ul 下的第 n 个li标签 （n从0 开始）

当n 可以为一个数字也可以是关键词 -- even 、odd (表格的隔行变色)

当n 为 2n 时等同 even 、当n 为 2n+1时等同odd

当n 为 5n 时选择5的倍数下的li元素

当n 为 n+3 时选择第 3 个之后的所有li元素

当n 为 -n+3 时选择前3个 li元素

div span:first-of-type{}   选择span类型的第一个元素

div span:first-of-type{}   选择span类型的最后一个元素

div span:nth-of-type(n){}   选择span类型的第n个元素

tip: 权重为10

 

 

三、CSS3伪元素选择器

::before 在元素内部的前面插入内容

::after 在元素内部的后面插入元素

tip：

before 和 after 必须有 content 属性

before 在内容的前面，after 在内容的后面

before 和 after 创建一个元素，但是属于行内元素（没有大小）----> {display:block'} or{display:inline-block'} 行内块

before 和 after 里面看不见刚才创建的元素，所以我们称为伪元素

伪元素 和 标签选择器一样，权重为 1

　　

博客只用于记录自己学习的东西，如有错误感谢留言斧正哦！