【Day12】CSS3选择器-CSS3属性

学习内容

• 渐进增强和优雅降级
• C3新增选择器
• 属性选择器
• 结构伪类选择器
• 属性名前缀
• 文本阴影
• 字体模块
• 新增背景属性
• 边框圆角

渐进增强和优雅降级

渐进增强:
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
先处理兼容问题，再实现完整效果

优雅降级:
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
先实现完整效果，再去处理兼容问题

css基础处理的兼容主要是不同浏览器之间的兼容问题
css3处理的兼容主要浏览器不容版本的兼容问题

C3新增选择器

层级选择器
E>F 子选择器 选中E标签的子级F标签 (只选中一级)
E~F 通用选择器 选择到E标签后面的所有F标签
E+F 相邻兄弟选择器选择到E标签的兄弟标签F，且只能选中一个 (书写位置在下面的)

序号伪类选择器:
E:first-child 选中第一个子元素E
E:last-child 选中最后一个子元素E
E:nth-child(n) 选中第n个子元素E
E:nth-last-child(n) 选中倒数第n个子元素E
E:nth-child(odd) 选中所有的奇数子元素E
E:nth-child(even) 选中所有的偶数子元素E
E:nth-child(xn) 选中x倍数的子元素E

属性选择器

属性选择器
E[属性名] 选择到所有具有该属性名的E元素
E[属性名="属性值"] 选择到所有具有该属性名属性值的E元素
E[属性名~="属性值"] 用在一个属性名有多个属性值，且多个属性值之间用空格隔开，选中到具有这个属性值的E元素
(class title name value)

E[属性名^="属性值"] 选中以这个属性值开头的元素
E[属性名$="属性值"] 选中以这个属性值结尾的元素
E[属性名*="属性值"] 选中包含这个属性值的元素
E[属性名|="属性值-"] 选中以属性值开头或者以属性值-开头的元素

结构伪类选择器

:root 选中根目录 (根目录永远是html)
E:empty 选中没有任何子元素的元素E (包括文本，符号等)

UI元素状态伪类选择器
E:enabled 选中可用状态的表单控件
E:disabled 选中不可用状态的表单控件
E:checked 选择选中状态的表单控件 (谷歌浏览器下: 单选框，复选框)
E::selection 选择用户选中时的样式 (ctrl+a)

E:focus 获取用户焦点时的样式

否定伪类选择器
E:not(s) 选中除了s之外的所有元素

目标伪类选择器
:target 用来选中跳转后的元素 (常指锚点链接跳转后)

属性名前缀

-ms- IE浏览器专属前缀
-moz- 火狐浏览器前缀
-o- 欧朋浏览器前缀
-webkit- 谷歌和safari浏览器前缀

文本阴影

text-shadow 文本阴影
水平方向 垂直方向 模糊程度 阴影颜色
阴影颜色默认为文字颜色
模糊程度默认为0，不模糊 值越大，越模糊
水平方向 垂直方向 两个值不能省，可以为负值

box-shadow 盒子阴影
水平方向阴影 垂直方向阴影 模糊程度 阴影大小 阴影颜色 内外阴影 inset 内阴影 outset 外阴影 (默认)
水平方向 垂直方向 两个值不能省，可以为负值

字体模块

字体模块: @font-face
@font-face {
  font-family: <YourwebFontName>;
  srC: <source> [<format>][,<source>[<format>]]*;
  [font-weight: <weight>];
  [font-style: <style>]
}
font-family: 自定义字体名称
src: url [字体格式]

新增背景属性

background-size: 背景图片尺寸
cover 等比例放大，直到撑满整个盒子 (背景图片会出现裁剪)
contain 等比例放大图片，撑满某个方向就停止 (会出现留白)

边框圆角

border-radius: 边框圆角
数值+单位  数值+%
值1: 表示四个方向的角
值1值2: 左上和右下 右上和左下  对角
值1值2值3: 左上 右上和左下 右下
值1值2值3值4: 左上 右上 右下 左下

border-上下-左右-radius: 单独设置某一方向上的边框圆角 (先上下，再左右)
值1/值2: 值1表示水平半径 值2表示垂直半径