CSS3新特性之新增的三大选择器

属性选择器

属性选择器通过已经存在的属性名或属性值匹配元素

选择符 含义
inp [attr] 选择具有attr 命名的属性的inp元素
inp [attr=“value”] 选择具有attr属性且属性值等于value的inp元素
inp [attr^=“value”] 匹配具有attr属性且值以value开头的inp元素
inp [attr$="value] 匹配具有attr属性且值以value结尾的inp元素
inp [attr*=“value”] 匹配具有attr属性且值中含有value的inp元素
  1. 利用属性选择器就可以不用借助于类或者id选择器



"text" value="请输入用户名">
"text"> 

  1. 可以选择 属性=值 的某些元素.



    "text" id="">
    "password" id="">

  1. 可以选择 属性值开头的某些元素



    
"index1">属性值开头
"index2">属性值开头
"index3">属性值开头
"index4">属性值开头

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素

选择符 含义
inp: first-child 匹配父元素中的第一个子元素 inp
inp: last-child 匹配父元素中最后一个inp元素
inp: nth-child(n) 匹配父元素中的第n个子元素inp
inp: first-of-typinp 指定类型inp的第一个
inp: last-of-typinp 指定类型inp的最后一个
inp: nth-of-typinp(n) 指定类型inp的第n个


   
  • 我变红了
  • 我没变
  • 我变绿了
  • 我变蓝了
  1. nth-child (n)选择某个父元素的一个或多个特定的子元素
  • n 如果是数字,就是选择第n个子元素,里面数字从1开始…
  • 可以是关键字:even偶数,odd奇数
  • 可以是公式: 如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略

  1. nth-childnth-of-type的区别



    

没人选我

我会变蓝 没人选我

总结:

  • nth-child对父元素里面所有子元素排序选择(序号是固定的)先找到第n个子元素,然后看看是否和inp匹配
  • nth-of-type对父元素里面指定子元素进行排序选择。先去匹配inp ,然后再根据inp找第n个子元素

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

  1. ::before在元素内部的前面插入内容
    ::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过content属性来为一个元素添加修饰性的内容。此元素默认为行内元素
    语法规范:element::before { 样式 }
a::before {
        
	content: "♥"; /*在a链接前面插入一个♥*/
 }
  1. ::after 在元素内部的后面插入内容
    ::after表示法是在CSS 3中引入的,::符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after
    语法规范:element::after { 样式 }
a::after {
        
	content: "♥"; /*在a链接后面插入一个♥*/
 }

注意:

  • beforeafter创建一个元素,但是属于行内元素
  • before 和 after必须有content属性
  • 可以用几乎任何方法定义 content中的文字和图片样式
  • 新创建的这个元素在文档树中是找不到的,所以称为伪元素
  • 伪元素选择器和标签选择器一样,权重为1

示例:




    

我是一只快乐的程序猿

结果:
伪元素选择器

你可能感兴趣的:(css,css,html,css3)