09 css3新特性-选择器

120 阅读1分钟

css3的新特性 -- 选择器

属性选择器

根据元素特定属性的来选择元素

image.png

image.png

image.png

根据 type是什么值来选择

image.png

image.png

image.png

选择 属性值开头的某些元素 ^

image.png

image.png

image.png

以谁结尾 $

image.png

image.png

image.png

* 只要有 就选择出来

image.png

image.png

image.png

权重

类选择器 , 属性选择器 ,伪类选择器 权重是10

结构伪类选择器

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

:first-child 第一个孩子

image.png

image.png

image.png

:last-child 最后一个孩子

image.png

image.png

选择某个父元素的一个或者多个特定的子元素

里面是数字

image.png

image.png

里面是关键字 even偶数 odd 奇数

image.png

image.png

里面是公式

写n

image.png

image.png
写 2n 等价于 even

image.png

image.png
写2n+1 等价于 odd

image.png

image.png
写 几n 就是几的倍数

image.png

image.png
n+几 就是从第几个开始 ,然后到最后 ; n是0 要注意!!

image.png

image.png
-n+几 就是前几个

image.png

image.png

:first-of-type :last-of-type :nth-of-type(n)

image.png image.png

nth-child 和 nth-of-child的区别

nth-child 会把所有的盒子都排列起来 一视同仁

image.png

所以 没有改变 ,因为找不到

image.png

nth-of-type 会把指定元素的盒子排列起来 只看亲生的

image.png

image.png

伪元素选择器

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

为什么叫伪元素

  • 因为 利用 before 和after创建一个元素,但是属于行内元素
  • 且 新创建的这个元素在文档树中是找不到的,所以称为伪元素

::before ::after

image.png

content 必须写,且用''括起来

image.png image.png