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

 

  

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

 

posted @ 2019-11-18 00:00  哈喽小伙  阅读(375)  评论(0编辑  收藏  举报