day07

1 CSS3 的选择器

1.1 基本选择器

tagName
.className
#idName
*
slector,selector,selector

 

1.2 层级选择器

selector1 selector2     后代
selectoer1>selectoer2   子元素
selector1+selector2     紧邻在后面的兄弟元素
selector1~selector      后面所有兄弟元素

 

1.3 属性选择器

selector[attr]          包含指定的属性
selector[attr=value]    指定属性的值
selector[attr^=value]   属性值以value开头
selector[attr$=value]   属性值以value结束
selector[attr*=value]   属性值包含value
selector[][][]          多个属性选择器

• 属性选择器优先级 类比 class

 

1.4 伪类选择器

/*语法*/
selector:伪类 {
   
}

 

:link     未访问的超链接
:visited  访问过的超链接
:hover    鼠标悬停 任意元素
:actived  激活状态的超链接
​
:focus    获得焦点时
​
:first-child  兄弟元素中的第一个
:last-child    最后一个
:nth-child()    指定数字，也可以指定关键字"odd", "even" 各行换色
:nth-last-child(2) 指定数字 倒数第几个
:only-child   是否是独生子女
​
:fist-of-type  分类型后的第一个
:last-of-type 分类后的倒数第一个
:nth-of-type()      指定数字，也可以指定关键字"odd", "even"
:nth-last-of-type()  分类后倒数第几个 指定数字
:only-of-type() 分类后是否唯一

 

1.5 伪元素选择器

::first-letter   第一个字
::first-line     第一行
::before         最前面插入一个子元素
::after         最后面追加一个子元素 解决自身浮动问题

 

 

2 CSS3 基础

2.1 浏览器私有前缀

-weibkit-*    chrome/safari
-moz-*       firefox
-ms-*         ie
-o-*         opera

 

2.2 CSS3 新增的颜色

rgba(r,g,b,不透明度)  不透明度：0~1 小数， 数越大，越不透明  

 

2.3 CSS3新增长度单位

px
em      默认字体大小的倍数
rem     根元素字体大小的倍数 手机上js获取屏幕大小 自适应用的比较多
vw      窗口宽度分成100份  50vw
vh      窗口高度分成100份   也是移动端较多  窗口和html大小的概念不一样

 

2.4 CSS3新增属性

# 重新设置 盒子模型的规则
box-sizing: content-box(默认) / border-box （width/height盒子的宽高 内陷）
​
# 外轮廓  在border的外面 不算盒子
outline: none;  最长用来取消input的轮廓
outline-style
outline-color
outline-width
​
# 不透明度
opacity 0~1 小数  整个盒子的透明度   rgba不包括字体

 

2.3 设置圆角

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius