CSS3介绍以及新增选择器_html/css_WEB-ITnose-html教程-PHP中文网

CSS3介绍以及新增选择器_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:45:50

原创

1494人浏览过

一：基本介绍

1：css版本

css1: 定义了网页的基本属性：字体，颜色，补白，基本选择器等等。
css2：添加了高级功能：浮动，定位，高级选择器（子选择器，相邻选择器，通用选择器）
css3：遵循模块化开发。发布时间并不是一个时间点，而是时间段。（2002-至今）

2：css3新特性
（1）CSS选择器
（2）新的颜色制式和透明设定
（3）多栏布局的实现
（4）多背景图效果
（5）文字阴影效果
（6）开放的网络字体类型
（7）圆角
（8）边框背景图片
（9）盒子阴影

（10）媒体查询

二：新增选择器

立即学习“前端免费学习笔记（深入）”；

css3新增选择器
(1)css3属性选择器
(2)css3结构伪类选择器
(3)css3 UI元素状态伪类选择器
(4)其他新增选择器

1:兄弟选择器

中国十大杰出人物

①别人家的孩子

②别人家的爸爸

③别人家的妈妈

④别人家的老公

⑤别人家的老婆

⑥别人家的公公

⑦别人家的婆婆

⑧别人家的公司

⑨别人家的领到

⑩别人家的员工

注意：(1)不选择第一个p标签，只选择它的兄弟
(2)只选择后面的兄弟标签，不能往前选择。

2:结构伪类选择器
（1）child系列
first-child 正数
last-child 倒数

nth-child(n);
nth-child(3n+1) 隔两个选一个
nth-child(even)；nth-child(2n)偶数
nth-child(odd) ;nth-child(2n+1)奇数

nth-last-child(n) 倒数
其他同上

only-child 唯一子元素，独生子
举例：li:only-child{color:#f00;font-size:30px}

举例：

我是父亲的第1个子元素，可惜我不是p标签，所以无法选中我

我是父亲的第2个子元素

我是父亲的第3个子元素

我是父亲的第4个子元素

我是父亲的第5个子元素

我是父亲的第1个子元素，并且我是p标签，所以我被选中了

我是父亲的第2个子元素

我是父亲的第3个子元素

我是父亲的第4个子元素

我是父亲的第5个子元素

（2）of-type系列
fist-of-type
last-of-type
nth-of-type(n)
nth-last-of-type(n)
only-of-type
类似child系列，但是只关注同类标签，只给同类标签计数。

(3)empty

(4)root
html:root{background:green}
等价于
html{background:green}
html的根永远都是html元素，整个html页面。没有什么实际意义。