划分区域标签&选择器

划分区域标签分为无语义标签和语义化标签
无语义标签：div
语义化标签（HTML5新增）：header、nav、aside、article、section、footer
div表示一个容器，用于包含其他元素，当找不到合适的语义化标签划分区域时，就可以用div来划分区域

header：用于表示页面或某个区域的头部

nav ： 用于表示导航栏

aside： 用于表示某个主题的相关的附加信息

article：用于表示文章或者其他可独立页面存在的内容

section：用于表示某个整体的一部分主题

footer：用于表示页面的底部

【CSS选择器】 选择器选中的是离大括号最近的元素，其他都是对这个元素的条件。

【1、基本选择器】

[通配符选择器]

书写格式：*{声明块}

例子： *{color:red;}

[元素选择器]

书写格式： 元素名{声明块}

例子： h1{color:red;}

[类选择器]

书写格式：.类名{声明块}

注：类名是匹配html标签中class的值

例子： .box{color:red;}

[ID选择器] （留给JS使用）

书写格式：#ID名{声明块}

注：ID名是匹配html标签中id的值

例子： #gaoliang{color:red;}

注：一个页面ID值不可以重复

[组合选择器，并集选择器]

书写格式：类名,元素名,ID名{声明块}

例子：h1,h2,.box,#f75{color:red;}

【2、层次选择器】

[子级选择器]

格式：父元素>子元素{声明块}

例子：article>section{color:red;}

[后代选择器]

格式：祖先元素空格后代元素{声明块}

例子：article section{color:red;}

[兄弟选择器]

格式：兄弟元素A+兄弟元素B{声明块}

功能：选中元素A后面的第一个兄弟元素（即相邻选择器）

例子：p+p{color:red;}

格式：兄弟元素A~兄弟元素B{声明块}

功能：选中兄弟元素A后面的所有兄弟元素B

例子：p~p{color:red;}

【3、 伪类选择器】

[选中第1个元素]

格式：元素:first-child

例子：p:first-child {color:red;}

[选中最后1个元素]

格式：元素:last-child

例子：p:last-child {color:red;}

[选中第n个元素（方式1）]

使用场景：所有兄弟元素的名字相同

格式：元素:nth-child(n) n是第几个元素

例子：p:nth-child(3) {color:red;}

注：若所有兄弟元素的名字不相同，可能会无法选中元素

[选中第n个元素（方式2）]

使用场景：兄弟元素的名字可以不相同

格式：元素:nth-of-type(n) n是第几个元素

例子：p:nth-of-type(3) {color:red;}

注：先筛选类型，在结果中选择第n个元素。

[选中奇数项元素]

格式：元素:nth-child(odd)

例子：p:nth-child(odd) {color:red;}

格式：元素:nth-child(2n+1)

注：n的起始值为0

例子：p:nth-child(2n+1) {color:red;}

[选中偶数项元素]

格式：元素:nth-child(even)

例子：p:nth-child(even) {color:red;}

格式：元素:nth-child(2n)

例子：p:nth-child(2n) {color:red;}

[选中前m个元素]

格式：元素:nth-child(-n+m)

例子：选中前3个p元素 p:nth-child(-n+3) {color:red;}

[否定伪类选择器]

格式：元素:not(:nth-child(n))

例子：除了第3个p元素以外的p元素都变成红色。 p:not(:nth-child(3)) {color:red;}

[动态伪类选择器]

a标签4种状态（顺序进行书写）

（格式：元素名:状态{声明块}）

1、未访问link

2、已访问visited

3、激活focus（焦点框）

4、悬停hover

5、点击active

书写顺序：12345或则21345