CSS3基础介绍和新增选择器

CSS3基础功能介绍

• 提升体验感部分CSS动画效果替代js的动画效果

• 布局上的更新 table淘汰 div+css布局 浮动 定位 移动端 最佳 flex弹性盒子布局方式

• 缺点：兼容性不是很好，不能向下兼容低版本。

  主要部分

  选择器
  属性
   display的新增属性
  动画
   2D转换
   3D转换 Z轴
   关键帧动画

CSS3新增选择器

 属性选择符
  ^=选择器
  说明选择具有什么属性且属性值以什么开头的字符串的什么元素

//语法
E[att^="val"] { sRules }
//eg
<style>
li[class^="a"] {
	color: #f00;
}
</style>

<ul>
	<li class="abc">列表项目</li>
	<li class="acb">列表项目</li>
	<li class="bac">列表项目</li>
	<li class="bca">列表项目</li>
	<li class="cab">列表项目</li>
	<li class="cba">列表项目</li>
</ul>
//会选择class名为 abc，acb，的元素

  $=选择器
  说明选择具有什么属性且属性值以什么结尾的字符串的什么元素

//语法
E[att$="val"] { sRules }
//eg
<style>
li[class$="a"] {
	color: #f00;
}
</style>

<ul>
	<li class="abc">列表项目</li>
	<li class="acb">列表项目</li>
	<li class="bac">列表项目</li>
	<li class="bca">列表项目</li>
	<li class="cab">列表项目</li>
	<li class="cba">列表项目</li>
</ul>
//会选择class名为 bca，cba，的元素

  *=选择器
  说明选择具有什么属性且属性值以包含什么的字符串的什么元素

//语法
E[att*="val"] { sRules }
//eg
<style>
li[class$="a"] {
	color: #f00;
}
</style>

<ul>
	<li class="abc">列表项目</li>
	<li class="acb">列表项目</li>
	<li class="bac">列表项目</li>
	<li class="bca">列表项目</li>
	<li class="cab">列表项目</li>
	<li class="cba">列表项目</li>
</ul>
//会选择class名为abc， acb，bac，bca，cba，的元素

伪类选择器

a:hover 悬停
a:link 未激活
a:active 已激活
a:visited 已访问

优先级顺序
link-》visited-》hover-》visited

在hover中是任何元素都可以使用
而其他是a标签所特有的伪类选择器

child伪类选择器

他不是单纯地找到第几个子元素 而是必须满足在父元素中也是第几个子元素不论元素的类型。
&&的关系

:first-child 找到第一个子元素
:last-child 找到最后一个子元素
:nth-child(n) 找到所有的元素
:nth-child(n+7) 找到从第七个开始的子元素 
:nth-child(3n) 找到所有3的倍数的li元素
:nth-child(odd) 找到所有的奇数行
:nth-child(even) 找到所有的偶数行

of-type伪类选择器

仅仅找到第几个元素，并不要求在父元素中第几个子元素指定类型，>的关系
使用方法如上

E:empty选择器

//匹配选择没有任何子元素(包括text节点)的元素

E:enabled选择器

匹配用户界面上处于可用状态的元素E。

E:disabled选择器

匹配用户界面上处于禁用状态的元素E。

E:checked选择器

//匹配用户界面上处于选中状态的元素E

伪元素选择器

::before之前

::after之后

如果不想改动页面结构 向页面添加内容 可以使用伪元素选择器
特点 : 页面解析成行内元素
作用：主要用来解决浮动带来的影响

::placeholder 找到所有的占位符

::first-letter 找到第一个字母

::first-line 找到第一行

::selection 修改选中的文本的样式