CSS3–1.css3 新增选择器

CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0;…

认识CSS3新增选择器和样式

前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的最后一个子元素的指定选择器 :nth-child(n):选取父元素中的第n个子元素的指定选择器,n取小于等于子元素个数的正整数.当n取n值表示选取父元素中所有子元素:n取2n表示选取父元素中所有偶数的子元素,等同于:nth-child(odd):n取2n+1表示选取父元素中所有奇数的子元素,等同于:…

CSS3 新增选择器

CSS3 新增选择器结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型 :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数. n 可以是数字.关键词或公式 li:first-child { /* 选择第一…

CSS3实战之新增的选择器

用的比较少看到知道怎么回事就ok http://www.w3.org/TR/css3-selectors/#selectors http://www.cnblogs.com/jscode/archive/2012/07/30/2615748.html 新增选择器列表: E[foo^="bar"]:匹配foo属性值以"bar"开始的E元素 E[foo$="bar"]:匹配foo属性值以"bar"结束的E元素 E[foo*=&q…

css3新增加的选择器

css3新增加的选择器一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字母c开头的E[attr$=b] 以这个字母b结尾的E[attr*=a] 只要包含a这个字母就行E[attr|=z] 只要以字母z-开头的或者就是字母z的二.结构性伪类选择器: E:nth-child(n) 第n个子节点div:nth-child(odd) 奇数行div:nth-child(even…

前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用CSS2.1也可以用CSS3.XHTML骨架中可以用CSS3的样式. 在学习CSS之前都是学习选择器,在CSS2中有class.id.标签选择器等. CSS3赋予了强大的选择器. CSS3没有颠覆传统CSS的写法,依然是: 选择器{ k:v; k:v; } CSS有一个特点,遇见自己不认识的选择器.…

CSS3常用30种选择器总结

CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.html 1. *:通用元素选择器 * { margin: 0; padding: 0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除默认CSS样式方法 *选择器也可以应用到子选择器中,例如下面的代码: #container * {…

CSS3 结构伪类选择器详解

1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型.否则无效 p:nth-child(1){color:red} <div> <p>这是红色的<p> </div> <div> <h1>这是第一个子元素但不是P类型,不是红色</h1> < p>这是黑色的注意对比…

css3学习系列之选择器（一）

CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val]属性选择器:选择值以val指定的字符串开头的att属性使用这个样式. [att$=val]属性选择器:选择值以val指定的字符串结尾的att属性使用这个样式. 属性选择器的例子:利用[att$=avl]属性选择器,可以根据超链接中不同的文件扩展符使用不同的样式. <!DOCTYPE html>…

CSS3学习系列之选择器（二）

first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first-child选择器与last-child选择器使用示例</title> <style> l…

CSS3的[att$=val]选择器

1.实例源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C…

Atitit.隔行换色变色 css3 结构性伪类选择器

Atitit.隔行换色变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读原理就是利用结构伪类选择器 .list_div tr:nth-of-type(odd){background:#fff;} /* 奇数行 */ /*-------------------------------*/ .list_div tr:nth-of-type(even){ background:…

CSS3 :nth-child()伪类选择器

CSS3 :nth-child()伪类选择器 CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹.虽然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”. 语法: :nth-child(an+b)…

css3的新特性选择器-------属性选择器

自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a example</p> <p id="one">I'm a example</p> <p>I'm a example</p> <p>I'm a example</p> <p>I'm a exa…

CSS3 结构性伪类选择器（2）

CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示通过“:first-child”选择器定位列表中的第一个列表项,并将序列号颜色变为红色. HTML代码: <ol> <li><a href="##">Link1</a></li> <li><a href…

CSS3 结构性伪类选择器（1）

1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元素,简单点说: :root{background:orange} html {background:orange;} 示例演示: 通过“:root”选择器设置背景颜色 HTML代码: <div>:root选择器的演示</div> CSS代码: :root { background:or…

CSS3：CSS3 简介

ylbtech-CSS3:CSS3 简介 1.返回顶部 1. CSS3 简介对CSS3已完全向后兼容,所以你就不必改变现有的设计.浏览器将永远支持CSS2. CSS3 模块 CSS3被拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模块如下: 选择器盒模型背景和边框文字特效 2D/3D转换动画多列布局用户界面 CSS3 建议 W3C的CSS3规范仍在开发. 但是,许多新的CSS3属性已在现代浏览器使用. 2. 2.返回顶部 3.返回顶部 4.…

CSS3：CSS3 背景

ylbtech-CSS3:CSS3 背景 1.返回顶部 1. CSS3 背景 CSS3 背景 CSS3中包含几个新的背景属性,提供更大背景元素控制. 在本章您将了解以下背景属性: background-image background-size background-origin background-clip 您还将学习如何使用多重背景图像. 浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号. 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览…

CSS3：CSS3 圆角

ylbtech-CSS3:CSS3 圆角 1.返回顶部 1. CSS3 圆角 CSS3 圆角使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". CSS3 圆角制作器浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号. -webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本. 属性 border-radius 9.0 5.04.0 -webkit- 4.03.0 -moz- 5.03.1 -webkit-…

CSS3：CSS3 边框

ylbtech-CSS3:CSS3 边框 1.返回顶部 1. CSS3 边框 CSS3 边框用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image CSS3 圆角在 CSS2 中添加圆角棘手.我们不得不在每个角落使用不同的图像. 在 CSS3 中,很容易创建圆角. 在 CSS3 中 border-radius 属性被用于创建圆角:…

CSS3：CSS3 文本效果

ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break 浏览器支持属性 text-shadow 4.0 10.0 3.5 4.0 9.5 box-shadow 10.04.0 -webkit- 9.0 4.03.5 -moz- 5.13.1 -w…

CSS系列：CSS3新增选择器

1. CSS1定义的选择器选择器类型说明 E 类型选择器选择指定类型的元素 E#id ID选择器选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器选择匹配E的元素,且匹配元素的class属性值为“class”,E选择符可以省略. E F 包含选择器选择匹配F的元素,且该元素被包含在匹配E的元素内. E:link 链接伪类选择器选择匹配E的元素,且匹配元素被定义了超链接并未被访问.例:a:link E:visited 链接伪类选择器选择匹配…

利用css3新增选择器制作背景切换

之前写css3的时间都是捡项目需要的来用,没有系统的学习过,这几天好好的补了一下css3的知识,真的获益匪浅!觉得新增的那些选择器是有用至极的!今天就来所这几天的所学做一个点击标签切换背景的效果,是纯css制作哦,不依赖js,算是作一个总结吧! 首先呢,前期工作当做是要先建好目录那些的了. index.html.css文件夹(包含style.css).img文件夹(包含1.jpg,2.jpg,3.jpg,4.jpg) 最后完成的效果如下(因为本人喜欢篮球,所以搞了几张nba人物卡通作素材),具体…