热搜:NVER node 开发 php

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

2024-11-08 23:20:01
CSS3介绍以及新增选择器_html/css_WEB-ITnose

一:基本介绍

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页面。没有什么实际意义。