大家好，感谢邀请，今天来为大家分享一下css3的新增属性的问题，以及和css选择器的优先级顺序的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
一、html5新增了哪些标签css3新增了哪些属性
1、h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。
2、video表示一段视频并提供播放的用户界面
3、source为video和audio提供数据源
4、datalist提供给其他控件的预定义选项
5、css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面
6、border-radius、box-shadow、border-image、
7、background-size：规定背景图片的尺寸
8、background-origin：规定背景图片的定位区域
9、background-clip：规定背景的绘制区域
10、css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
11、animation、animation-name、animation-duration等
12、：target这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
二、CSS3新增的哪些选择器和常见的属性是哪些
CSS3新增的属性选择器{除ie6外的大部分浏览器支持）
1 E[att^="val"]属性att的值以"val"开头的元素 div[id^="nav"]{ background:#ff0;}
2 E[att$="val"]属性att的值以"val"结尾的元素
3 E[att*="val"]属性att的值包含"val"字符串的元素
(注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。
由于IE6/7/8不支持，没办法，选择合适的场合用吧。)
4 E:root匹配文档的根元素，对于HTML文档，就是HTML元素
5 E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1 p:nth-child(3){ color:#f00;}
6 E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1 p:last-child{ background:#ff0;}
7 E:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素 p:nth-of-type(2){color:red;}选择父元素的第n个子元素p
8 E:nth-last-of-type(n)与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素
9 E:last-child匹配父元素的最后一个子元素，等同于:nth-last-child(1)
10 E:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
11 E:last-of-type匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
12 E:only-child匹配父元素下仅有的一个子元素，等同于:first-child:last-child或:nth-child(1):nth-last-child(1) p:only-child{ background:#ff0;}
13 E:only-of-type匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)
14 E:empty匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 p:empty{ background:#ff0;}
与用户界面(UI)有关的伪类(ie6 7 8不支持)
15 E:enabled匹配表单中激活的元素
16 E:disabled匹配表单中禁用的元素 input[type="text"]:disabled{ background:#ddd;}
17 E:checked匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
18 E::selection匹配用户当前选中的元素
19 E~ F匹配任何在E元素之后的同级F元素 p~ ul{ background:#ff0;}
(ie6 7 8 firefox3.0以下 Opera9.0不支持)
20 E:not(s)匹配不符合当前选择器的任何元素:not(p){ border:1px solid#ccc;}
21 E:target匹配文档中特定"id"点击后的效果
-moz-box-shadow: 20px 10px 0#000;
-webkit-box-shadow: 20px 10px 0#000;
二. border-colors(为边框设置多种颜色)
-moz-border-bottom-colors:#555#666#777#888#999#aaa#bbb#ccc;
-moz-border-top-colors:#555#666#777#888#999#aaa#bbb#ccc;
-moz-border-left-colors:#555#666#777#888#999#aaa#bbb#ccc;
-moz-border-right-colors:#555#666#777#888#999#aaa#bbb#ccc;
颜色值数量不固定,且FF的私有写法不支持缩写:-moz-border-colors:#333#444#555;
-moz-border-image: url(exam.png) 20 20 20 20 repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
(1). 20 20 20 20--->边框的宽度,分别对应top, right, bottom, left边框,改变宽度可以实现不同的效果;
(2).边框图片效果(目前仅实现了两种):
repeat---边框图片会平铺,类似于背景重复;
stretch---边框图片会以拉伸的方式来铺满整个边框;
(3).必须将元素的边框厚度设置为非0非auto值.
text-shadow:[<颜色><水平偏移><纵向偏移><模糊半径>]||[<水平偏移><纵向偏移><模糊半径><颜色>];
(1)<颜色>和<模糊半径>是可选的,当<颜色>未指定时,将使用文本颜色;当<模糊半径>未指定时,半径值为0;
(2)shadow可以是逗号分隔的列表,如:
text-shadow: 2px 2px 2px#ccc, 3px 3px 3px#ddd;
(3)阴影效果会按照shadow list中指定的顺序应用到元素上;
(4)这些阴影效果有可能相互重叠,但不会叠加文本本身;
(5)阴影可能会跑到容器的边界之外,但不会影响容器的大小.
FF 3.5, Opera 10, Safari 4, Chrome 3
text-overflow: inherit| ellipsis| clip;
-o-text-overflow: inherit| ellipsis| clip;
(1)还有一个属性ellipsis-word,但各浏览器均不支持.
IE6+, Safari4, Chrome3, Opera10
word-wrap: normal| break-word;
IE6+, FF 3.5, Safari 4, Chrome 3
filter: alpha(opacity=50);/* for IE6, 7*/
-ms-filter(opacity=50);/* for IE8*/
九. box-sizing(控制盒模型的组成模式)
box-sizing: content-box| border-box;// for opera
-moz-box-sizing:content-box| border-box;
-webkit-box-sizing:content-box| border-box;
使用此值时,盒模型的组成模式是,元素宽度= content+ padding+ border;
使用此值时,盒模型的组成模式是,元素宽度= content(即使设置了padding和border,元素的宽度
FF3+, Opera 10, Safari 4, Chrome 3
resize: none| both| horizontal| vertical;
1.必须将元素的overflow属性设置为auto或hidden,该属性才能起作用(overflow设置为visible时,无效);
(2). both-->可同时缩放宽度和高度;
(3). horizontal-->仅能缩放宽度;
(4). vertical-->仅能缩放高度;
outline:边框厚度边框样式边框颜色;
outline-offset需要独立写,简写是无效的.
FF3+, safari 4, chrome 3, opera 10
十二. background-size(指定背景图片的尺寸)
-o-background-size: [length| percentage]{1, 2};
-webkit-background-size:[length| percentage]{1, 2};
-o-background-size: 50px 60px;
-webkit-background-size:50px 60px;
这会将背景图片的宽设置了50px,高60px.
十三. background-origin(指定背景图片从哪里开始显示)
-webkit-background-origin: border| padding| content;
-moz-background-origin: border| padding| content;
(1) border-->从border区域开始显示背景;
(2) padding-->从padding区域开始显示背景;
(3) content-->从content区域开始显示背景;
1.必须先指定background属性,然后才能指定该属性,如果该属性出现在background属性之前,
十四. background-clip(指定背景图片从什么位置开始裁切)
-webkit-background-origin: border-box| padding-box| content-box| no-clip;
(1)border-box-->从border区域向外裁剪背景;
(2)padding-box-->从padding区域向外裁剪背景;
(3)content-box-->从content区域向外裁剪背景;
1.必须先指定background属性,然后才能指定该属性,如果该属性出现在background属性之前,
十五. background(为一个元素指定多个背景)
background: [background-image]| [background-origin]| [background-clip]| [background-repeat]| [background-size]| [background-position]
background: url(bg1.png) no-repeat left top, url(bg2.png) no-repeat right bottom;
十六. hsl(通过色调,饱和度,亮度来指定颜色值)
hsl:(<length>||<percentage>||<percentage>);
(1) length: h(色调), 0(或360)表示红色, 120表示绿色, 240表示蓝色;
(2) percentage: s(饱和度),取值为0%到100%之间的值;
(3) percentage: l(亮度),取值为0%到100%之间的值;
background: hsl(240, 50%, 100%);
safari 4, chrome 3, FF3, opera 10
十七. hsla(在hsl的基础上上增加了一个透明度设置)
hsla:(<length>||<percentage>||<percentage>||<opacity>);
(1) opacity: a(透明度),取值在0到1之间;
background: hsl(240, 50%, 100%, 0.5);
color: hsl(240, 50%, 100%, 0.5);
safari 4, chrome 3, FF3, opera 10
十八. rgba(基于r,g,b三个颜色通道来设置颜色值,通过a来设置透明度)
(5)正整数在0到255之间,百分数在0%到100%之间.
safari 4, chrome 3, FF3, opera 10
十九、transition（a标签hover渐隐效果）
a:hover{transition: color 0.15s linear 0s, background-color 0.3s linear 0s;}
-webkit-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-moz-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-o-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-ms-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
三、css3新增的属性有哪些
1、RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个 alpha通道，即除了红绿蓝三种颜色外还增加一个代表透明度的通道，其中 RGB值分别表示红色、绿色、蓝色，而 alpha取值则为 0到 1（小数位一位）。
2、background-image：设置元素的背景图像。
3、background-origin：规定背景图片的定位区域。
4、background-size：规定背景图片的尺寸。
5、background-repeat：设置是否及如何重复背景图像。
6、word-wrap属性允许长单词或 URL地址换行到下一行。
7、注：所有主流浏览器都支持 word-wrap属性。
8、text-shadow属性：向文本设置阴影。
9、参数分别表示：水平阴影，垂直阴影，模糊距离，阴影颜色；
10、在新的@font-face规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
11、border-radius属性：是一个简写属性，用于设置四个 border-*-radius属性。
12、注：该属性允许您为元素添加圆角边框！
13、border-image：将图片规定为包围 div元素的边框
14、box-shadow属性：向框添加一个或多个阴影。（盒阴影）
15、媒体查询定义两套css，当浏览器的尺寸变化时会采用不同的属性。
好了，文章到这里就结束啦，如果本次分享的css3的新增属性和css选择器的优先级顺序问题对您有所帮助，还望关注下本站哦！
