CSS3简介

如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，
弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

CSS3的兼容情况

CSS3给开发人员带来了很多有趣的功能，同时也为用户提供了更好的用户体验。但是，这一切并不是所有的浏览器都完全支持。目前主流的浏览器都采用了私有属性的形式来支持CSS3属性，以便让用户体验CSS3的新特性。

下面介绍这些私有属性：

Webkit引擎浏览器使用“-webkit-”作为私有属性，像Safari和Chrome浏览器。
Gecko引擎浏览器使用“-moz-”作为私有属性，像Firefox浏览器。
Konqueror引擎浏览器使用“-khtml-”作为私有属性。
Opera浏览器浏览器使用“-o-”作为私有属性。
IE浏览器使用“-ms-”作为私有属性，只有IE8以上支持。

css:
-webkit-transition:1s;
-moz-transition:1s;
-o-transition:1s;
transition:1s;
JS:
WebkitTransition:1s;
MozTransition:1s;
OTransition:1s;
Transition:1s;

这些专用私有属性虽然可以避免不同浏览器在解析相同属性时出现冲突，但是却给开发人带来了诸多不便。因为，开发人员不仅需要写更多的代码，而且还非常容易导致同一个页面在不同的浏览器之间表现不一致。当然随着CSS3的普及，这种情况一定会得到改善。

新增选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。

选择相邻兄弟

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器,

h1 + p {margin-top:50px;
}

匹配选择器

匹配所有在#div元素之后的同级p元素。

 div ~ p {background-color: #f00;}

属性选择器

CSS3新增加了属性选择器，使选择器引入了通配符的概念。这3中常用的属性选择器如下所示：

[att*=“val”] 匹配具有att属性，并且属性值包含val字符的元素。
[att^=“val”] 匹配具有att属性，并且属性值以val字符开头的元素。
[attr$=“val”] 匹配具有att属性，并且属性值以val字符结尾的元素。

假设页面中有如下HTML标签：

<p class="group1">paragraph1</p>
<p class="group2">paragraph2</p>
<p class="group3">paragraph3</p><p class="group1 group2 group3">paragraph4</p>
<p class="group1-group2-group3">paragraph5</p>
<p class="group1group2group3">paragraph6</p>

使用属性选择器选择上面的HTML标签：

 /* 选择带有 class 属性的标签 */[class] {background-color: #f00;}/* 选择 class 属性值为 group1 的标签 */[class="group1"] {background-color: #0f0;}/* 选择 class 属性值以 group1 开始的标签选择 class 属性值为 group1 的标签*/[class^=group1] {background-color: #00f;}/* 选择 class 属性值以 group3 结尾的标签选择 class 属性值为 group3 的标签*/[class$=group3] {background-color: #ff0;}/* 选择 class 属性值中包含 group2 子字符串的标签 选择 class 属性值为 group2 的标签*/[class*=group2] {background-color: #0ff;}/* 选择 class 属性值包含 group1 类名的所有标签，类名之间以空格分隔 选择 class 属性值为 group1 的标签*/[class~=group1] {background-color: #f0f;}/* 选择 class 属性值包含 group1 子字符串，并其以 group1 开始，子字符串之间以连接符分隔。选择 class 属性值为 group1 的标签*/[class|=group1] {background-color: #000;}

结构性伪类选择器

结构性伪类选择器是CSS3中新增加的类型选择器。常用的的结构性伪类选择器如下所示：

:root：将样式应用到页面的根元素中。
:not(selector)：排除selector选择器选中的元素，不对它们应用样式解析。
:empty：指定当元素内容为空白时使用的样式。
:target
对页面中某个target元素指定样式，该样式只在用户单击了页面中的链接，并且跳转到target元素后生效。
:first-child 对父元素中的第一个子元素指定样式。
:last-child 对父元素中的最后一个子元素指定样式。
:only-child当某个父元素中只有一个子元素时使用的样式。
:first-of-type 匹配某个父元素中第一个某一类型的元素
:last-of-type 匹配某个父元素中最后一个某一类型的元素。
:only-of-type 当某个父元素中只有一个某一类型的子元素时使用的样式。
:first-child** 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type** 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
:nth-child(n)
对指定序号的子元素设置样式（从前往后数）。参数可以使数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3），参数的索引起始值时1，而不是0。
:nth-last-child(n) 对指定序号的子元素设置样式（从后往前数）。参数同上。
:nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数）。参数同上。
:nth-last-of-type(n)匹配指定序号的同一种类型的子元素（从后往前数）。参数同上。

root选择器

root选择器就是将样式应用到根元素中。在整个HTML页面中，指的就是整个“html”部分。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>:root {background-color: lightblue;}body {background-color: orange;}</style>
</head>
<body><h3>标题内容</h3><p>段落内容</p>
</body>
</html>

上面的代码使用不同的样式指定root元素和body元素的背景颜色，根据不同的颜色取值，背景颜色就会发生相应的变化。如果不指定root的背景色，而仅仅指定body元素的背景色，那么整个页面都会变成橘红色。

not选择器

如果用户想对某个结构元素使用样式，但想排除这个结构元素下的子结构元素，就可以使用not选择器。:not(selector)选择器中的Selector只能简单的选择器，例如：id，class，标签选择器，伪类选择器，不能使用复合选择器，例如：并列，后代，属性等等。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">div *:not(h3) {color: orange;font-weight: bold;}</style>
</head>
<body>
<div><h3>赠汪伦</h3><p id="news num1">李白乘舟将欲行</p><p id="ingnews">忽闻岸上踏歌声</p><p id="news">桃花潭水深千尺</p><p id="endnews">不及汪伦送我情</p>
</div>
</body>
</html>

empty选择器

empty选择器很好理解，当元素没有任何内容是，就可以使用empty选择器定义样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>td {border: 1px solid #666;padding: 0 16px 0;}:empty{background-color: #f00;}</style>
</head>
<body><table><tr><td>书名</td><td>作者</td><td>其他作品</td></tr><tr><td>平凡的世界</td><td>路遥</td><td>人生</td></tr><tr><td>基督山伯爵</td><td>大仲马</td><td></td></tr><tr><td>苍老的少年</td><td></td><td>暂无作品</td></tr>
</table>
</body>
</html>

target选择器

使用target选择器为页面中的某个target元素（该元素的id被当作页面中的超链接来使用）指定样式，该样式只在用户单击了页面中的超链接，并且跳转至target元素后起作用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 600px;margin: 0 auto;}:target{color: red;background-color: #DBDBDB;}</style>
</head>
<body>
<div><a href="#p1">马云简介</a> | <a href="#p2">马化腾简介</a> | <a href="#p3">李彦宏简介</a><p id="p1">马云，男，1964年9月10日生于浙江省杭州市，祖籍浙江省嵊州市（原嵊县）谷来镇， 阿里巴巴集团主要创始人，现担任阿里巴巴集团董事局主席、日本软银董事、大自然保护协会中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事。[1]
1988年毕业于杭州师范学院外语系，同年担任杭州电子工业学院英文及国际贸易教师，1995年创办中国第一家互联网商业信息发布网站“中国黄页”，1998年出任中国国际电子商务中心国富通信息技术发展有限公司总经理，1999年创办阿里巴巴，并担任阿里集团CEO、董事局主席。
2013年5月10日，辞任阿里巴巴集团CEO，继续担任阿里集团董事局主席。[2]  6月30日，马云当选全球互联网治理联盟理事会联合主席。[3]  10月受邀出任英国首相戴维·卡梅伦的特别经济事务顾问。 [4]  2016年5月8日，马云任中国企业家俱乐部主席。9月21日，联合国秘书长潘基文亲自签发任命书，宣布马云受邀出任联合国贸易和发展会议青年创业和小企业特别顾问。1964年9月10日出生于浙江省杭州市，马云的爷爷抗
早年生活
早年生活(3张)战时做过保长，解放后被划为“黑五类”，取名为“马云”，就是希望马云以后乖巧懂事，少惹是非。12岁时，马云买了台袖珍收音机，从此每天听英文广播，对英语开始感兴趣，13岁起，马云因为打架记过太多，曾被迫转学到杭州八中。之后马云参加中考，考了两年才考上一所极其普通的高中，其中一次数学只得了31分。
1982年，马云第一次参加高考，首次落榜，数学只得了1分。马云充满了挫败感，之后他跟表弟到一家酒店应聘服务生，结果表弟被录用，自己惨遭拒绝，老板给出的理由是马云又瘦又矮，长相不好。后来马云做过秘书、搬运工人。马云高考落榜，父亲马来法见他意志消沉，让他蹬三轮给杂志社送书。[5]
1983年，马云第二次参加高考，再次落榜，数学提高到了19分。马云的父母劝他死了上大学的心，好好学门手艺，之后马云又开始骑着那辆破旧的自行车，穿梭于杭州的大街小巷。
1984年，马云不顾家人的极力反对第三次参加高考，这次数学考了89分，但总分离本科线还差5分。由于英语专业招生指标未满，部分英语优异者获得升本机会，马云被杭州师范学院破格升入外语本科专业。进入大学后，马云变成了品学兼优的好学生，凭借出色的英语稳坐外语系前五名。之后马云当选学生会主席，后来还担任了两届杭州市学联主席。[6]
教师工作
创办杭州海博网络公司
创办杭州海博网络公司(2张)
1988年，马云从杭州师范学院外国语系英语专业毕业，获文学学士学位，之后被分配到杭州电子工业学院(现杭州电子科技大学），任英文及国际贸易讲师。之后马云成为杭州市优秀青年教师，发起西湖边上第一个英语角，开始在杭州翻译界有名气。
1992年，由于很多人来请马云做翻译，马云成立海博翻译社，请退休老师做翻译。为生存下去，马云背着大麻袋到义乌、广州去进货，海博翻译社开始卖鲜花，卖礼品，还曾经销售过一年的医药，推销对象上至大医院，下至赤脚医生。
1994年，海博翻译社营收持平。其中来自西雅图的外教比尔和马云聊互联网，马云开始寻找机会决定创业。
1995年年初，海博翻译社开始赚钱。马云作为翻译来到洛杉矶沟通落实一起高速公路投资未果后。从洛杉矶飞到西雅图找比尔，比尔领马云去西雅图第一个ISP公司VBN参观。[7] </p><p id="p2">马化腾[1]  ，男，1971年10月29日生于广东省汕头市潮南区。腾讯公司主要创办人之一，现担任腾讯公司控股董事会主席兼首席执行官；全国青联副主席。
他曾在深圳大学主修计算机及应用，于1993年取得深大理科学士学位。在创办腾讯之前，马化腾曾在中国电信服务和产品供应商深圳润迅通讯发展有限公司主管互联网传呼系统的研究开发工作，在电信及互联网行业拥有10多年经验。
1998年和好友张志东注册成立"深圳市腾讯计算机系统有限公司"。2009年，腾讯入选《财富》“全球最受尊敬50家公司”。在2014年3000中国家族财富榜中马化腾以财富1007亿元荣登榜首，相比于2013年，财富增长了540亿元。1971年10月29日出生于广东省汕头市（前汕头专区）潮南区成田镇家美社区家一村。
童年时，当时马化腾的父母在东方县（原属广东省，海南建省后划归海南省）工作，1984年13岁正在读初二时马化腾随家人从海南迁至深圳 。后就读于深圳大学计算机系计算机专业。[11]
1993年从计算机专业毕业后，马化腾进入深圳润迅通讯发展有限公司[12]  ，开始做编程工程师，专注于寻呼机软件的开发，至升任开发部主管。该段经历使马化腾明确了开发软件的意义就在于实用，而不是写作者的自娱自乐。润讯提升了马化腾的视野，以及给马化腾在管理上必要的启蒙[13]  。
第一桶金
1998年，实用软件概念不仅培养了马化腾敏锐的软件市场感觉，也使他从中盈利不菲。马化腾是风靡一时的股霸卡的作者之一，他和朋友合作开发的股霸卡在赛格电子市场一直卖得不错。马化腾还不断为朋友的公司解决软件问题。这使他不仅在圈内小有名气，而且也有了相当的原始积累。
但他真正意义上的第一桶金是来自股市[14]  。他最精彩的一单是将10万元炒到70万元。这为马化腾独立创业打下了基础[</p><p id="p3">李彦宏，百度公司创始人、董事长兼首席执行官，全面负责百度公司的战略规划和运营管理。
1991年，李彦宏毕业于北京大学信息管理专业，随后前往美国布法罗纽约州立大学完成计算机科学硕士学位，先后担任道·琼斯公司高级顾问、《华尔街日报》网络版实时金融信息系统设计者，以及国际知名互联网企业——Infoseek公司资深工程师。李彦宏所持有的“超链分析”技术专利，是奠定整个现代搜索引擎发展趋势和方向的基础发明之一。2000年1月，李彦宏创建了百度。经过十多年的发展，百度已经发展成为全球第二大独立搜索引擎和最大的中文搜索引擎。百度的成功，也使中国成为美国、俄罗斯和韩国之外，全球仅有的4个拥有搜索引擎核心技术的国家之一。2005年，百度在美国纳斯达克成功上市，并成为首家进入纳斯达克成分股的中国公司。百度已经成为中国最具价值的品牌之一。
2013年，当选第十二届全国政协委员，兼任第十一届中华全国工商业联合会副主席、第八届北京市科协副主席等职务，并获聘“国家特聘专家”。
2016年3月两会，李彦宏公布了自己的两会提案：一、关于加快制定和完善无人驾驶汽车相关政策法规，抢占产业发展制高点的提案；二是关于支持专网资源投入社会化运营，促进提速降费的提案 ；三是关于完善我国空域资源管理制度，提升民航准点率，推动我国航空事业发展的提案 。</p>
</div></body>
</html>

first-child选择器和last-child选择器

first-child选择器和last-child选择器分别用于为父元素中第一个或者最后一个子元素设置样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>p:first-child {background-color: skyblue;}p:last-child {background-color: skyblue;}</style>
</head>
<body><div><p><a href="">第一篇 让浪漫永恒</a></p><p>第二篇 记忆中的故乡小村庄</p><p>第三篇 第一次飞出国门</p><p>第四篇 母亲的微笑</p><p>第五篇 关注生命关注你</p><p>第六篇 带你飞跃太平洋</p></div>
</body>
</html>

nth-child和nth-last-child选择器

first-child选择器和last-child选择器可以定义某个父元素中第一个或最后一个子元素的样式，但是如果用户想要为上例中的第三篇文章标题或倒数第二篇文章标题定义样式，使用这两个选择器就不行了。为了解决这个问题，下面介绍nth-child和nth-last-child选择器。

tr:nth-child(even){
Background-color: #f00;
}
tr:nth-last-child(old){
Background-color: #f00;
}

状态伪类选择器

::selection指定当前元素处于选中状态部分的样式。只能向选择器应用少量CSS属性：color、background、cursor等。
:first-letter：对每个文本的首个字符
:first-line:对每段文本的第一行
::before:向当前的元素前面追加内容
::after:向当前的元素内容后面追加内容
:disabled 指定当前元素处于不可用状态时的样式。
:enabled 指定当前元素处于可用状态时的样式。
:checked 指定表单中单选框或复选框处于选中状态时的样式。

JS新增的选择器-重点

querySelector();

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">window.onload = function() {// var div1 = document.querySelector("#div1");var div1 = document.querySelector("[myselect=hello]");div1.style.background = "red";}</script>
</head>
<body><div id="div1" myselect="hello">哈哈哈</div>
</body>
</html>

querySelectorAll();

window.onload = function() {var boxs = document.querySelectorAll(".box");console.log(boxs);
}

文本样式

文字阴影

语法：

text-shadow：x y blur color, …

参数

x 横向偏移量，可以为负值。

y 纵向偏移，可以为负值。

blur 指定阴影的模糊半径，值越大模糊范围就越大，省略时表示不向外模糊。

color 指定阴影的颜色

多重阴影

文本阴影可以添加多层，会呈现出多重阴影的效果，但是层数太多会导致性能问题。下面是一些常见的多重阴影效果。

浮雕效果

h1 {color: #fff;font-size: 100px;font-family: Verdana, Geneva, Tahoma, sans-serif;text-shadow: 2px 2px 4px #000;

层叠效果：

h2 {color:red;font-size:100px;font-family: Verdana, Geneva, Tahoma, sans-serif;text-shadow:2px 2px 0px white, 4px 4px 0px red;}

光晕效果：

h3 {color:white; font-size:100px;font-family: Verdana, Geneva, Tahoma, sans-serif; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}

火焰效果：

h4 {color:white;font-size:100px; font-family: Verdana, Geneva, Tahoma, sans-serif;text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; }

案例:鼠标悬浮时，文字模糊效果

h1 {color: #000;font-size: 100px;font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1:hover {color: rgba(0, 0, 0, 0);text-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

文字描边

-webkit-text-stroke:宽度颜色

代码实例：

p {font-size: 40px;color: #f00;font-weight: bold;-webkit-text-stroke:1px #0f0;}

背景样式

背景尺寸

在CSS2以及之前的版本中，背景图像的大小是由图片的实际尺寸决定的，我们无法控制背景图像的样式，如果要完整地显示背景图像，就需要设计好背景图片的大小。为了解决这个问题，CSS3中新增加了一个属性：background-size属性。它可以让开发者随心所欲地控制背景图像的大小。

background-size属性的语法如下所示：

background-size: auto | [<length> | <percentage>] | cover | contain;

其中比较常用的参数如下所示：

auto 默认值，保持背景图片原有的宽度和高度。
length
由浮点数字和单位组成的长度值。其中单位为px，不可为负值。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为"auto"，但是auto并不是指背景图片的原始高度，而是和第一个值相等。
percentage
百分比，以盒子（当前设置背景图的元素）的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为"auto"。
cover:
保持图片本身的宽度和高度，当图像小于容器，又无法使用background-repeat来实现时，就可以使用cover将图片放大以铺满整个容器。这种方法会使背景图片失真。
contain:(较多)
保持图片本身的宽度和高度，当图像大于容器而需要将背景图片全部显示出来时，就可以使用contain将图片缩小到适合容器的大小。这种方法也会使背景图片失真。

背景原点

到目前为止，如果要给图像定位，可以使用background-position属性，但是这个属性总是以元素的左上角为坐标原点进行图像定位。background-origin属性是用来指定绘制背景图像时的起点，使用此属性可以任意定位图像的起始位置。它的语法如下：

background-origin: border-box | padding-box | content-box;

其中比较常用的参数如下所示：

padding-box：默认值，从padding区域开始显示背景。
border-box：从border区域开始显示背景。
content-box：从content区域开始显示背景。

div {width:400px;    height:200px; border: 10px dotted #f00;padding: 20px;background: url(img/2.jpg) no-repeat;   /*background-size: contain;*/background-origin: content-box;}

背景裁剪

background-clip属性用来指定背景的显示范围或者背景的裁剪区域。语法如下：

background-clip: border-box | padding-box | content-box;

其中比较常用的参数如下所示：

border-box：默认值，背景从border区域向外裁剪，也就是超出border区域的背景将被裁剪掉。
padding-box：
背景从padding区域向外裁剪，也就是超出padding区域的背景将被裁剪掉。
content-box：
背景从content区域向外裁剪，也就是超出content区域的背景将被裁剪掉。

div {width:400px;    height:200px; border: 10px dotted #f00;padding: 20px;background: url(img/2.jpg) no-repeat;   /*background-size: contain;*/background-clip: border-box;}

提示：background-clip另外用途 – 给文字剪裁背景

  #box {width: 400px;height: 400px;margin: 0 auto;font-size: 100px;color: rgba(0, 0, 0, 0);background: url('./img/3.jpg') no-repeat;-webkit-background-clip: text;}

多重背景

在CSS3中可以在一个元素里显示多个背景图像，还可以将多个背景图像进行重叠显示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {background-image: url(img/1.jpg),url(img/3.jpg),url(img/2.jpg);background-repeat: no-repeat, no-repeat, no-repeat;background-position: 5% 100%, 95% 0%, top;padding: 300px 0;}</style>
</head>
<body><div></div>
</body>
</html>

盒子大小

box-sizing: content-box|border-box|inherit;

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

默认值:	content-box
版本:	CSS3

语法

box-sizing: content-box|border-box|inherit:

值	说明
content-box	这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	指定 box-sizing 属性的值，应该从父元素继承

border-box：盒子大小=width

CSS3---新增内容相关推荐

Web学习 HTML5，CSS3新增内容
文章目录 HTML5新标签与特性文档类型设定字符设定常用新标签新增的input type属性值: 常用新属性多媒体标签多媒体 embed 多媒体 audio 多媒体 video CSS3 ...
CSS3新增的主要内容
CSS3新增的主要内容: 新的选择器: 属性选择器结构伪类选择器:nth-child(n) 伪元素选择器:::before,::after 转换transform 2D转换 3D转换动画anima ...
html新增伪类,CSS3新增的伪类有哪些与居中div的多种方法
CSS3新增伪类有那些? p:first-of-type:选择属于其父元素的首个元素 p:last-of-type:选择属于其父元素的最后元素 p:only-of-type:属于父元素的特定类型的 ...
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
CSS3新增-属性（长度颜色背景）选择器-盒子模型
属性(长度颜色背景)选择器-盒子模型 1 CSS3 基本语法 1.1 CSS3 浏览器私有前缀 Chorme: -webkit- Safari: -webkit- IE; -ms- Firefox: ...
php伪类,CSS3新增伪类
p:last-of-type 选择其父元素的最后的一个P元素 p:last-child 选择其父元素的最后子元素(一定是P才行) p:first-of-type ...
前端基础（13）：CSS3新增属性和选择器
学习目标 1.CSS3的概念.优势及应用 2.渐进增强和优雅降级的简介 3.CSS3部分新增选择器的语法及应用 4.CSS3的新增属性语法及应用一.CSS3的概念.优势及应用 CSS3是css技术的 ...
关于H5、CSS3新增的一些元素及属性
H5简介 HTML5是HTML最新的修订版本,具有新的元素,属性和行为. HTML5规范于2014年10月29日由万维网联盟正式宣布. 随着移动化的进程,HTML5终将成为主流. H5的新变化 H5文 ...
CSS3新增了哪些新特性
一.是什么 css,即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更美观 css3是css的最新标准,是向后兼容的,CSS1/2 的 ...
css3有哪些新增属性,CSS3新增属性
本篇文章为大家介绍一些CSS3新增的属性,CSS3新属性的出现弥补了CSS2版本的不足,解决了很多我们设置元素样式时的痛点. 1.文本阴影属性 text-shadow:水平距离垂直距离模糊半径(模 ...

CSS3---新增内容

CSS3简介

CSS3的兼容情况

新增选择器

选择相邻兄弟

匹配选择器

属性选择器

结构性伪类选择器

状态伪类选择器

JS新增的选择器-重点

文本样式

文字阴影

文字描边

背景样式

背景尺寸

背景原点

背景裁剪

多重背景

盒子大小

语法

CSS3---新增内容相关推荐

最新文章

热门文章