CSS3 是 CSS2 的 "进化" 版本,在 CSS2 基础上,增强或新增了许多特性, 弥补了 CSS2 的众多不足之处,使得 web 开发变得更为高效和便捷。 W3C 的 CSS3 规范仍在开发。但是,许多新的 CSS3 属性已在现代浏览器使用。
目前浏览器对 css3 的兼容并不是太好,有些属性我们需要加上浏览器的前缀。
- - moz -
- /* 火狐等使用Mozilla浏览器引擎的浏览器 */
- - webkit -
- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
- - o -
- /* Opera浏览器(早期) */
- - ms -
- /* Internet Explorer */
示例: 记住加前缀的要写在前面,不加前缀的写在后面
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <style>
- .box{width: 1000px;height: 200px;margin:100px auto;border: 1px solid#000;/* 浏览器私有化前缀:
- -webkit-: 谷歌 苹果
- -moz-:火狐
- -ms-:ie
- -o-:欧朋
- */
- background:-webkit-linear-gradient(left,red,blue);background:-moz-linear-gradient(left,red,blue);background:-ms-linear-gradient(left,red,blue);background:-o-linear-gradient(left,red,blue);background:linear-gradient(left,red,blue);}
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </html>
CSS3 新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3 选择器与 jQuery 中所提供的绝大部分选择器兼容。
属性选择器 其特点是通过属性来选择元素,具体有以下 5 种形式:
- 1、E[attr] 表示存在attr属性即可;
- div[class]2、E[attr=val] 表示属性值完全等于val;
- div[class=mydemo]3、E[attr*=val] 表示的属性值里包含val字符并且在"任意"位置;
- div[class*=mydemo]4、E[attr^=val] 表示的属性值里包含val字符并且在"开始"位置;
- div[class^=mydemo]5、E[attr$=val] 表示的属性值里包含val字符并且在"结束"位置;
- div[class$=demos]
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <style>
- div {width: 300px;height: 50px;border: 1px solid#000;margin: 20px auto;text-align: center;}
- /*有class属性的div*/
- div[class] {background: yellow;}
- /*class为box1的div*/
- div[class=box1] {color: white;background: black;}
- /*class值以aa开头的div*/
- div[class^=aa] {background: green;}
- /*class的值包含x4的div*/
- div[class*=x4] {background: blueviolet;}
- /*class的值以x3结尾的div*/
- div[class$=x3] {background: lightsalmon;}
- </style>
- </head>
- <body>
- <div class="box1">1</div>
- <div class="aabox2">2</div>
- <div class="bbbox3">3</div>
- <div class="box4aa">4</div>
- <div class="box5bb">5</div>
- <div class="aabox6bb">6</div>
- <div class="bbbox7aa">7</div>
- <div>8</div>
- </body>
- </html>
伪类选择器 除了以前学过的: link、:active、:visited、:hover,CSS3 又新增了其它的伪类选择器。
结构伪类 通过结构筛选元素. 常用:
- E:first-child第一个子元素E:last-child最后一个子元素E:nth-child(n) 选择所有在其父元素中第n个位置的匹配E的子元素。如果不匹配则无效E:nth-last-child(n) 选择所有在其父元素中倒数第n个位置的匹配E的子元素,如果不匹配,则无效E:nth-of-type(n) 选择所有在其父元素中第n个位置的E元素E:nth-last-child选择所有在其父元素中倒数第n个位置的E元素E:empty选中没有任何子节点的E元素
示例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <style>
- ul { width: 400px; list-style: none; margin: auto; } li { width: 50px;
- height: 50px; border: 1px solid gray; float: left; margin-left: -1px; margin-top:
- -1px; text-align: center; line-height: 50px; } /*第一个li*/ li:first-child
- { background: red; } /*最后一个li*/ li:last-child { background: green; } /*奇数li*/
- li:nth-child(odd) { background: blue; } /*偶数li*/ li:nth-child(even) { background:
- red; } /*3的倍数li*/ li:nth-child(3n) { color: white; background: black; }
- /*第一个到底三个li,n是从0开始,如果公式的结果值为负数,选取无效*/ li:nth-child(-1n+3) { background:
- yellow; } /*第11个li*/ li:nth-child(11){ background: blueviolet; }
- </style>
- <body>
- <ul>
- <li>
- 1
- </li>
- <li>
- 2
- </li>
- <li>
- 3
- </li>
- <li>
- 4
- </li>
- <li>
- 5
- </li>
- <li>
- 6
- </li>
- <li>
- 7
- </li>
- <li>
- 8
- </li>
- <li>
- 9
- </li>
- <li>
- 10
- </li>
- <li>
- 11
- </li>
- <li>
- 12
- </li>
- <li>
- 13
- </li>
- <li>
- 14
- </li>
- <li>
- 15
- </li>
- <li>
- 16
- </li>
- <li>
- 17
- </li>
- <li>
- 18
- </li>
- <li>
- 19
- </li>
- <li>
- 20
- </li>
- <li>
- 21
- </li>
- <li>
- 22
- </li>
- <li>
- 23
- </li>
- <li>
- 24
- </li>
- <li>
- 25
- </li>
- <li>
- 26
- </li>
- <li>
- 27
- </li>
- <li>
- 28
- </li>
- <li>
- 29
- </li>
- <li>
- 30
- </li>
- <li>
- 31
- </li>
- <li>
- 32
- </li>
- <li>
- 33
- </li>
- <li>
- 34
- </li>
- <li>
- 35
- </li>
- <li>
- 36
- </li>
- <li>
- 37
- </li>
- <li>
- 38
- </li>
- <li>
- 39
- </li>
- <li>
- 40
- </li>
- <li>
- 41
- </li>
- <li>
- 42
- </li>
- <li>
- 43
- </li>
- <li>
- 44
- </li>
- <li>
- 45
- </li>
- <li>
- 46
- </li>
- <li>
- 47
- </li>
- <li>
- 48
- </li>
- <li>
- 49
- </li>
- </ul>
- </body>
- </html>
注意:n 遵循线性变化,其取值 0、1、2、3、4、… 但是当 n<=0 时,选取无效。
选中所有的奇数的 li li:nth-child(2n-1){color: red;} 选中所有的 7 的倍数的 li li:nth-child(7n){color: red;} 选中前面五个 li:nth-child(-1n+5){color: red;} 选中后面五个 li:nth-last-child(-1n+5){color: red;} 所有的偶数 li:nth-child(even){color:red} 所有的奇数 li:nth-child(odd){color:blue;} …….
nth-child 和 nth-of-type 的区别
ele:nth-of-type(n) 是指父元素下第 n 个 ele 元素, 而 ele:nth-child(n) 是指父元素下第 n 个元素且这个元素为 ele,若不是,则选择失败。
同样的 nth-last-child 和 nth-last-of-type 的区别也一样。
示例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <style>
- /*这里获取失败 因为父元素的第一个子元素并不是p标签*/ p:nth-child(1) { background: red; } /*这里可以获取到*/
- p:nth-of-type(1){ background: pink; }
- </style>
- <body>
- <span>
- span
- </span>
- <p>
- 第一个p标签
- </p>
- <div>
- div
- </div>
- <p>
- 第二个p标签
- </p>
- </body>
- </html>
目标伪类 E:target 结合锚点进行使用,处于当前锚点的元素会被选中;
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <style>
- section:target { color: red; font-size: 20px; }
- </style>
- <body>
- <nav>
- <ul>
- <li>
- <a href="#news">
- 新闻
- </a>
- </li>
- <li>
- <a href="#technology">
- 科技
- </a>
- </li>
- <li>
- <a href="#recreation">
- 娱乐
- </a>
- </li>
- </ul>
- </nav>
- <section id="news">
- 新闻
- </section>
- <section id="technology">
- 科技
- </section>
- <section id="recreation">
- 娱乐
- </section>
- </body>
- </html>
伪元素选择器 标志性符号(::)双冒号
- E::before在标签前插入内容
- E::after在标签后插入内容
- E::first-letter文本的第一个字母或字
- E::first-line文本第一行
- E::selection选中的文本
示例:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- /*标签前面*/
- p::before {content: "我叫 ";color: red;}
- /*标签后面*/
- p::after {content: " 很高兴认识你";color: cornflowerblue;}
- /*首个字母或文字*/
- div::first-letter {font-size: 20px;color: red;}
- /*选中的文本*/
- div::selection {color: blue;}
- </style>
- </head>
- <body>
- <p>喻志强</p>
- <div>my name is yzq,nice to meet you!</div>
- </body>
- </html>
理解伪类和伪元素 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过: hover 来描述这个元素的状态。虽然它和普通的 css 类相似,可以为已有的元素添加样式,但是它只有处于 dom 树无法描述的状态下才能为元素添加样式,所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过::before 来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。
伪类是用单冒号来表示 伪元素是使用双冒号来表示
E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下 E:after、E:before 会被自动识别为 E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理。
新增了 RGBA、HSLA 模式,其中的 A 表示透明度通道,即可以设置颜色值的透明度,相较 opacity,它们不具有继承性,即不会影响子元素的透明度。
RGBA rgba(255,0,0,0.1); R、G、B 取值范围 0~255 Red、Green、Blue、Alpha 即 RGBA
HSLA Hue、Saturation、Lightness、Alpha 即 HSLA H 色调 取值范围 0~360,0/360 表示红色、120 表示绿色、240 表示蓝色 S 饱和度 取值范围 0%~100% L 亮度 取值范围 0%~100% A 透明度 取值范围 0~1
关于透明度
opacity 子盒子会继承父盒子的透明度
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/css">
- div{width: 100px;height: 100px;background: red;opacity: 0.4;}
来源: http://blog.csdn.net/yuzhiqiang_1993/article/details/68924799