HTML&CSS3(2)

CSS3中新增选择器

新增选择器有什么优点?

和之前的选择器相比 更加方便的让我们找到元素

属性选择器介绍

  • E[attr] 表示存在attr属性即可
  • E[attr=val] 表示属性值完全等于val
  • E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置
  • E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置
  • E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置

伪类选择器介绍

  • E:first-child 第一个子元素
  • E:last-child 最后一个子元素
  • E:nth-child(n) 第n个子元素,计算方法是E元素的全部兄弟元素
  • E:nth-last-child(n) 同E:nth-child(n) 相似,只是倒着计算

伪元素选择器介绍

  • E::after&&E::before 在元素上添加before和after假元素

    如果要加伪元素一定要给伪元素添加content:’’;

    伪元素是一个行内元素

    伪元素只能添加给真实元素 不能独立存在

    推荐 大家都是用单冒号

阴影

为什么要学习阴影属性

阴影属性介绍

  • text-shadow: X轴偏移 Y轴偏移 模糊程度 颜色
  • box-shadow: X轴偏移 Y轴偏移 模糊程度 阴影扩展半径 颜色 投影方式

边框半径属性

为什么要学习边框半径属性

边框半径属性介绍

border-radius: 2px; 四个角对应的扇形的半径都是2px

border-radius: 2px 4px; 左上和右下的角对应的扇形的半径都是2px 右上和左下的角对应的扇形的半径都是4px

border-radius: 2px 4px 6px 8px; 从左上角开始 顺时针 对应的四个角的半径分别是2px 4px 6px 8px

border-radius: 2px 2px 2px 2px/2px 2px 2px 2px; 每一个角有两个值 分别为X/Y 斜杠前面的是每一个角的X,而斜杠是每一个角的Y

###