css基础知识7（HTML5新增标签及css3选择器）

HTML5新增标签

1.HTML5的特点

语义化标签（尽可能的使用有相对应的结构的含义的HTML标签）
1）语法：<header></header>
说明：header元素表示页面中一个内容区块或者整个页面的标题。

2）语法：<footer></footer>
说明：footer元素表示整个页面或者页面中的一个内容区块的脚注。一般来说。包含原创作者的姓名、创作日期以及原创作者联系信息。

3）语法：<article><article>
说明：article元素表示页面中的一块与上下文不相关的独立内容，比如说报纸中的一篇文章。

4）语法：<aside></aside>
说明：aside元素表示artical元素的内容之外的，与article元素的内容相关的辅助信息。

5）语法：<section></section>
说明：section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其它重要部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。

6）语法：<nav></nav>
说明：nav元素表示页面中导航链接的部分。

7）语法：<figure></figure>
说明：（1）figure元素表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素添加标题。
（2）figure是一种元素的组合，带有可选标题。用来表示网页上一块独立的内容。
（3）figcaption表示figure的标题。从属于figure，并且figure中只能放置一个figcaption。

8）语法：<mark></mark>
说明:mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。一个比较典型的应用就是在搜索结果中向用户高亮显示关键词。

css3选择器

1.属性选择器

（E代表element，[]里面表示条件，{sRules}为css）
1）语法:E[att]{sRules}
说明：用于选取带有指定属性的元素。

2）语法：E[att=“val”]{sRules}
说明：用于选取带有指定属性和值的元素。

3）语法：E[att~=“val”]{sRules}
说明：用于选取属性值中包含指定词汇的元素。

4）E[att|=“val”]{sRules}
说明：用于选取带有指定值开头的属性值元素，该值必须是整个单词。

2.新增：

1）语法：E[att^=“val”]{sRules}
说明：匹配属性值以指定元素开头的每个元素。

2）语法：E[att$=“val”]{sRules}
说明：匹配属性值以指定值结尾的每个元素。

3）语法：E[att*=“val”]{sRules}
说明：匹配属性值中1包含指定值的每个元素。

3.伪类选择器

1）结构性伪类选择器

语法： :first-child与：last-child
说明：单独指定第一个子元素和最后一个子元素的样式。

语法： :nth-child与nth-last-child
说明：对指定序号的子元素使用样式。

对所有第奇数个子元素或第偶数个子元素使用样式
:nth-child(odd){}//所有正数下第奇数个子元素
:nth-child(even){}//所有正数下第偶奇数个子元素
:nth-last-child(odd){}//所有倒数上去第奇数个子元素
:nth-last-child(even){}//所有倒数上去第偶数个子元素

语法：:nth-of-type与:nth-last-of-type
说明：使用这两种选择器时，css3在计算子元素是第奇数个子元素还是第偶数个子元素的时候，就只针对用类型的子元素进行计算。

语法：:nth-child(an+b)与:nth-last-child(an+b)
说明：循环使用样式，an+b形式，a表示每次循环中共包括几种样式，b表示指定的样式在循环中所处的位置。

语法： :only-child
说明：只有一个元素的时候使用。

2）目标伪类选择器
语法：:target
说明：突出显示活动的HTML锚
URL带有后面跟有锚名称#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target选择器可以用于选取当前活动的目标元素。
使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超级链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

3）层级选择器

语法：E>F{sRules}
说明：子元素选择器(Child selectors)只能作为某元素子元素的元素，选择匹配的F元素，且匹配的F元素为所匹配的E元素的子元素。

语法:E+F{sRules}
说明：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，E F两元素具有一个相同的父元素，而且F元素在E元素的后面，并且相邻。

语法：E~F{sRules}
说明 ：用来指定位于同一父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。选择某元素后面的所有兄弟元素，需要在同一父元素之中，E和F元素是属于同一父元素之内并且F元素在E元素之后，那么E~F选择器将选择中所有E元素后面的F元素。