1.10 C3选择器、阴影

C3选择器、阴影

一 、层级选择器

1、后代选择器

选择器 选择器{}

2、子代选择器

选择器>选择器{}

3、相邻的后面的兄弟

选择器+选择器{}

4、相邻的后面的兄弟们

选择器~选择器{}

二、伪类选择器

1、结构性的伪类带child

• 子元素： first-child{} 第一个孩子
• 子元素： last-child{} 最后一个孩子
• 子元素： nth-chlid(){} 第几个孩子
  • 括号里可以是具体的数字/ odd(奇数) / even(偶数) / 表达式（3n / 2n+1之类的）

2、结构性的伪类带type

• 子元素：first-of-type{} 第一个孩子
• 子元素: last-of-type{} 最后一个孩子
• 子元素:nth-of-type(){} 第几个孩子
  • 括号里可以是具体的数字/odd(奇数)/even(偶数)/表达式(3n/2n+1之类的)

区别:如果子元素是同一个的话,使用的时候没区别,不一样的话,child要看该元素属于众多孩子中的第几个,值就写几. type要先看该类型的孩子有几个,再看属于这种类型的第几个

3、状态伪类选择器

• input :enabled {} 可编辑表单
• input :disabled{} 不可编辑表单
• input :focus{} 表单获取焦点
• input :checked{} 选中
  • 选中单选改后面的文字 需要用label绑定下

<input type="radio" name="a" id="man" value="" /><label for="man">男</label>

   for的值指向选中的人的id名

• ::selection{} 鼠标选中文字时候的样式,一般改背景色和字体颜色

4.动态伪类选择器

• :link{} 未访问之前
• :visited{} 访问后
• :hover{} 划过
• :active{} 按下

三、属性选择器（了解）

• [属性名]{} 根据属性名
• [属性名=“属性值”]{} 根据属性名和值匹配
• [属性名^=“值”]{} 以值开头
• [属性名$=“值”]{} 以值结尾
• [属性名*=“值”]{} 包含该值

四、css3属性

1、渐进增强

一开始针对普遍的浏览器,为了可以在高级的浏览器上面显示更特殊的效果,可以给其添加一些css3属性

2、优雅降级

一开始就针对高级的浏览器,如果想在低版本的浏览器显示特殊的效果的话,需要对代码做特殊的处理

官方术语

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

3、浏览器前缀

• 欧鹏 -o-
• 火狐 -moz-
• ie -ms-
• 谷歌 -webkit-

五、阴影

1、盒子阴影 box-shadow

box-shadow:水平偏移 垂直偏移 模糊程度 [模糊大小] 颜色;

2、文字阴影 text-shadow

text-shadow:水平偏移 垂直偏移 模糊程度 颜色;

3、圆角 border-radius

• 一个值:四个角
• 两个值:对角
• 三个值:左上 对角 右下
• 四个值:顺时针的角

设置⚪border-radius: 50%/100%

六、背景属性

1、背景图大小 background-size

background-size:宽度 高度;

• 数字px
• 数值%
• 关键字
  • **cover:**图片会不断的放大,直到覆盖整个容器之后才停止,可能会出现背景图显示不全
  • **contain:**图片会不断的放大,碰到容器的某个边缘后就停止,可能会出现背景图填充不满

复合写法 background: 颜色 路径 去重 位置/大小;

2、背景图固定(css2属性) background-attachment

background-attachment: scroll(滚动)/fixed(固定)