HTML5前端知识图谱

前端知识必备概要

HTML5知识概要

前端开发知识库体系

1. HTML5知识库

2. CSS3知识库

3. JavaScript知识库

4. jQuery知识库

5.Node.js知识库

6.AngularJS知识库

7.React知识库

前端开发知识库细分

HTML知识图谱

CSS知识图谱

1. css 内容排版

2. css 布局模型

3. css 盒子模型

4. css 元素display

5. css 选择器

6. css 语法

7. css 通用设置

7.1 css选择器

选择器

基础类选择器

ele 元素选择器
.class
#id
* 通配
元素相关选择器

div p 空格 后代选择器
div>p > 父子选择器
div+p + 第一个亲弟弟选择器(同一个爹且必须是第一个亲弟)
div~p ~ 所有亲弟弟选择器(同一个爹)
div，p , 多元素选择器
属性相关选择器

[color] 带有color属性的所有元素
[color="red"] 属性值选择器，选择color="red"的所有元素
[class~="className2"] 包含单词选择器，选择class属性包含单词"className2"的所有元素。
(谨记一定是包含单词 单词 单词 ，重要的事情说三遍)
例如：有的元素类名是class="className1 claseName2"时可以选择一个类名className2
子串属性选择器

[color^="re"] 开头选择器
[color$="ed"] 结尾选择器
[color*="ee"] 包含子串选择器
注意和[class~="className2"] 包含单词属性选择器区别,~=必须包含单词，*=不必是单词
[lang|="en"] 特定属性开头选择器
这个与[color^="re"] 开头选择器的区别是什么(还是没搞懂他们真正区别)？？？个人觉得是|=必须单词开头，^=不必是单词
第n个选择器

nth-选择器

:nth-child(n) 匹配属于其父元素的第 N 个子元素,不论元素的类型
:nth-last-child(n) 匹配属于其父元素的第 N 个子元素，但是从最后一个子元素开始计数，不论元素的类型
:nth-of-type(n) 匹配属于其父元素的特定类型的第N个子元素的每个元素
:nth-last-of-type(n) 同上，但最后一个子元素开始计数
补充小知识，nth-就是第几个的意思，带type就是要论元素类型的，哎！吃了英语不好的亏。
比较:nth-child(n),nth-of-type(n)这个很容易，前者是第n个子元素不论元素类型的;后者特定类型子元素的第n个。

首尾选择器

:first-of-type 匹配属于其父元素的特定类型的首个子元素的每个元素(注意：特定类型且是首个元素里的每个元素，意思就是包含首个元素里面的所有元素)
:last-of-type 同上，特定类型最后一个元素的包含的每个元素
:first-child 匹配其父元素首个子元素的每个元素
:last-child 同上，最后一子元素的每个元素
:only-child 匹配其父元素的唯一的子元素
伪类选择器

a标签相关

:link 未访问:visited 已访问:hover 鼠标悬停:active 被鼠标按着时
顺序LVHA（记忆LOVE HA），为什么是这个顺序了？
本质是同等优先权的样式，写在后边的会覆盖前边。
前两者的状态是常态，后2者是即时状态，当即时状态触发时，要覆盖常态，所以2个即时状态要放在后边。
因为在常态下：如果a标签被访问过后，就要呈现被访问过得状态，所以visited要放在link后边，
因为鼠标按下时，伴随着悬停的a标签上，所以要想active覆盖hover，就必须把active放在后面

:focus 键盘焦点:first-child 元素第一个子元素:lang() 指定lang属性的元素添加样式
伪元素选择器

::before 在某元素之前插入内容
::after 在某元素之后插入内容
::first-letter 将特殊的样式添加到文本的首字母
::first-line 将特殊的样式添加到文本的首行
其他选择器(按我常用排序)

:disabled 选择每个禁用的input
:enabled 选择每个启用的input
:checked 每个被选中的input
:not(a) 选择非元素的每个元素
::