今日学习内容

• 选择器

1. 基本选择器

通配符选择器   标签选择器  id选择器  class选择器  群组选择器

1. 关系选择器

后代选择器  空格

子代选择器  大于号

相邻兄弟选择器   加号  只向下边查找和自己相邻的第一个兄弟

通用选择器   波浪线  只向下边查找所有的这类兄弟

1. 动态伪类选择器

：link  ：visited  ：hover  ：active  ：focus 获取焦点

1. 目标伪类选择器

：target  指超链接锚点id所在的元素

1. 语言伪类选择器（了解）

Q：lang（no）{quotes：””“”；}

<q lang=”no”></q>

1. Ui元素状态伪类选择器

Enabled 启用

Disabled 禁用

Checked 默认选重

1. 结构伪类选择器

：first-child 这个结构中的第一个

：first-of-type 这个元素类型的第一个

：last-child 这个结构中的最后一个

：last-of-type 这个元素类型的最后一个

：nth-child(n) 这个结构中的第几个元素 n的取值可以是1---n  或者是n的倍数 奇数 2n+1或者2n-1或者 odd  偶数 2n 或者 even

：nth-of-type(n) 这个元素类型的第几个

：nth-last-child() 这个结构中的倒数第几个

：nth-last-of-type() 这个元素类型的倒数第几个

：only-child 这个结构中只有一个元素

：only-of-type 这个元素类型只有一个

：empty 这个元素内容为空时

：root 文档结构的根节点

1. 否定选择器

：not（n）{}

N是什么就给谁除去

1. 属性选择器

选择器[属性] 只要存在此属性即可

选择器[属性=“属性值”] 属性必须有并且属性值必须为给定值

选择器[属性^=“属性值”] 属性必须有并且属性值以给定值开头

选择器[属性$=“属性值”] 属性必须有并且属性值以给定值结尾

选择器[属性*=“属性值”] 属性必须有并且属性值可以在任意位置出现

1. 伪元素选择器

：after{content:””}  内容之后

:before{content:””}  内容之前

:first-letter{}  第一个字符

:first-line{}  第一行

• 优雅降级和渐进增强

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

• 背景相关属性

背景图片的显示范围 background-clip：border-box  padding-box content-box

背景图片的绘制起点 background-origin：border-box  padding-box content-box

背景图片的尺寸 background-size：

直接写一个数值代表将图片的宽度设置为给定数值，其高度等比例缩放

写两个值第一个代表图片的宽度  第二个代表图片的高度

Contain: 将图片等比例缩放直到宽度和高度都不能缩放为止

Cover：将图片等比例缩放直到一个（只要有一个）方向不能缩放为止

一个元素可以添加多张背景图片，需要注意位置问题，谁在前边谁在上边显示，多张图片中间用逗号隔开，如果背景颜色和背景图片同时存在并且背景图片是多张那么需要将背景颜色添加在最后的位置。

• 文本相关属性

文本阴影 text-shadow：水平偏移  垂直偏移  模糊半径 阴影颜色

盒子的阴影box-shadow：水平偏移  垂直偏移  模糊半径 阴影颜色 内外阴影 inset内阴影  outset外阴影默认  如果水平垂直都不存在偏移值 只给模糊半径和颜色四周都会出现阴影效果

    服务器端字体

• 用图片做边框

Border-images：图片  裁切位置  裁切位置 裁切位置 裁切位置/边框粗细 重复方式