- CSS3新增选择器
- 基本选择器-通配选择器
- 通配符选择器(*)用来选择所有元素,也可以选择某个元素下的所有元素
- 基本选择器-元素选择器
- 元素选择器包含的HTML元素有:html、body、p、div、ul、li等。
- 基本选择器-ID选择器
- 在使用ID选择器之前(#id)
- 基本选择器-类选择器
- 类选择器(.class)是以独立于文档元素的方式来指定元素样式
- 基本选择器-群组选择器
- 将相同样式的元素分组在一起,每个选择器之间逗号隔开
- 层次选择器-后代选择、子选择器
- 1、【后代】选择器【x y】,儿子,孙子,重孙,,
- 2、【子】选择器【x>y】,只有儿子
- 层次选择器-相邻兄弟选择器、通用选择器
- 3、【相邻兄弟】选择器【x+y】, 后面的、紧挨着的兄弟,1个或没有
- 紧挨在该元素后的元素,且具有相同的父元素
- 4、【通用兄弟】选择器【x~y】
- 同层、后面的、具有相同父元素所有的元素
- 3、【相邻兄弟】选择器【x+y】, 后面的、紧挨着的兄弟,1个或没有
- 动态伪类选择器,主要是链接使用,伪类选择器,使用“:”
- a:link 未被访问的超链接
- a:visited 已访问的超链接
- a:hover 鼠标悬停
- a:active 点击鼠标,超链接被激活
- UI元素伪类选择器
- x:checked 元素处于选中状态
- x:enabled 元素处于可用状态
- x:disabled 元素处于不可用状态
- 目标伪类选择器
- E:target 匹配元素被相关URL指向
- 结构伪类选择器
- E:root 根元素
- E:empty 没有任何子元素(包括text节点)的元素
- child系列
- E:first-child 第一个子元素
- 【执行步骤】p:first-child
- 1)找到页面中的p元素(任何标签内部第一个出现p元素)
- 2)找到该p元素的父元素(找到div元素:id为A、id为B、id为C)
- 3)检测父元素的第一个子元素类型是否为p标签
- A的第1个子元素是h1不选,B的第1个子元素是p选择,C的第1个子元素是p选择
- 4)最终选择【B】的第1个子元素、【C】的第1个子元素
- E:last-child 最后一个子元素
- E:only-child 仅有的一个子元素
- E:nth-child(n) 第n个子元素
- E:nth-last-child(n) 倒数第n个子元素
- of-type系列
- E:first-of-type 同类型中的第一个同级兄弟元素
- E:last-of-type 同类型中的最后一个同级兄弟元素
- E:only-of-type 同类型中的唯一的一个同级兄弟元素
- E:nth-of-type(n) 同类型中的第n个同级兄弟元素
- E:nth-last-of-type(n) 同类型中的倒数第n个同级兄弟元素
- 两者区别:
- 1)child系列的元素序号是把父亲的【所有】子元素放在一个集合中,然后排序
- 2)type 系列的元素序号是把父亲的【指定元素类型】的所有子元素放在一个集合中,然后排序。
- 属性选择器
- E[att] 具有att属性
- E[att="val"] 具有att属性,且属性值【等于】val
- E[att^="val"] 具有att属性,且属性值为以val【开头】的字符串
- E[att$="val"] 具有att属性,且属性值为以val【结尾】的字符串
- E[att*="val"] 具有att属性,且属性值为【包含】val的字符串
- E[att~="val"] 具有att属性,且属性值为用【空格】分隔的字词列表,其中一个等于val
- E[att|="val"] 具有att属性,且属性值为以val【开头】并用连接符【"-"】分隔的字符串
- 伪元素选择器
- E:first-letter/E::first-letter 第一个字符(1个2个“:”皆可)
- E:first-line/E::first-line 第一行的(1个2个“:”皆可)
- E:before/E::before 在对象前发生,与content一起使用(1个2个“:”皆可)
- E:after/E::after 在对象后发生,与content一起使用(1个2个“:”皆可)
- E::selection 对象被选择时(只能1个“:”)
- 基本选择器-通配选择器
- HTML5标签
- (块状元素) 有意义的div
- 新的结构标签带来网页布局的改变及提升搜索引擎的友好度:
- <header> 标记定义一个页面或一个区域的头部
- <nav> 标记定义导航链接
- <article> 标记定义一篇文章
- <section> 标记定义一个区域
- <aside> 标记定义页面内容部分的侧边栏
- <footer> 标记定义一个页面或一个区域的底部
- <hgroup> 标记定义文件中一个区块的相关信息
- <figure> 标记定义一组媒体内容以及它们的标题
- 使用figure标签代替li标签,P标签由figcaption标签代替。
- <figcaption> 标签定义 figure 元素的标题
- 一个figure元素内最多只允许放置一个figcaption元素,其他元素可无限放置
- 新的全局属性标签
- <contenteditable> 用户编辑内容标签
- true规定可以编辑元素内容。 false规定无法编辑元素内容。
- <hidden> 隐藏属性标签
- hidden 属性规定对元素进行隐藏,隐藏的元素不会被显示。
- hidden属性在html5中,只要存在,就是隐藏效果,而不论值为多少都要显示元素,要删除hidden属性,而不是设置为false。
- <spellcheck> 拼写语法检查标签
- 1.类型为 text 的 input 元素中的值(非密码)
- 2.textarea 元素中的值
- 3.可编辑元素中的值
- <contenteditable> 用户编辑内容标签
- 其他标签
- <mark> 有标记文本标签(突出的黄色标记)。
- <video> 元素定义视频,比如电影片段或其他视频流。
- video标签只支持Ogg、MPEG4、WebM这三种视频媒体格式.
- <audio> 元素定义音频,比如音乐或其他音频流
- audio标签只支持wav、mp3、ogg这三种音频媒体格式
- <embed> 元素用来插入各种多媒体格式
- 可以是midi,WAV,aiff,au,MP3等
- <time> 元素表示日期或时间,也可以同时表示两者,
- time有一个pubdate属性,pubdate属性是可选的、布尔值属性。
- 它可以用到time元素上,表示文章或整个网页的发布日期。
- 边框与背景
- border-radius:圆角
- box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow 必选。水平阴影的位置,可正可负
- v-shadow 必选。垂直阴影的位置,可正可负
- blur 可选。模糊距离,正值,0即无模糊效果,值越大阴影边缘越模糊
- spread 可选。阴影向四周扩展的尺寸,正值,阴影扩大,负值阴影缩小
- color 可选。阴影的颜色
- inset 可选。将外部投影改为内部投影,默认outset
- box-shadow: 10px 20px 5px 10px red inset ;
- 设置背景图 background-image: url(xx);
- 背景尺寸属性 background-size
- /* 用数值改变背景图大小 */
- /* background-size: 100px; */
- /* 以百分比改变背景图大小,相对于div的宽度 */
- /* background-size: 50%; */
- /* 等比放大背景图 */
- /* background-size: cover; */
- /* 等比缩小背景图 */
- /* background-size: contain; */
- 背景图片重复方式 background-repeat: repeat-y;