[TOC]
[CSS 选择器 | 菜鸟教程 (runoob.com)](https://www.runoob.com/cssref/css-selectors.html)
# **all**
将除却 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。『IE不支持』
~~~
/* 全局 */
//改变该元素或其父元素的所有属性至初始值
all: initial
//改变该元素或其父元素的所有属性的值至他们的父元素属性的值
all: inherit
//如果该元素的属性的值是可继承的，则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值，反之则改变为初始值
all: unset
/* CSS Cascading and Inheritance Level 4 */
all: revert;
~~~
# **基本选择器**
元素选择器：
```css
div,p{}
```
某个类指定的标签
```
/*ul.nav-lis*/
ul.nav-list{
}
```
通配选择器(*)：
~~~css
li[data-value]
*[lang^=en]{color:green;}
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}
~~~
# **模糊匹配**
可匹配到div,class为“-btn”结尾的元素
```
div[class$="-btn"]:active{
opacity:.8
}
```
可匹配到div,id为“item-”开头的元素
```
div:[id^="item-"]{
color:red
}
```
\*=表示模糊匹配，[href*="163"]可以匹配href="163.com"、href="mail.163.com"等元素；
选择每一个src属性的值包含子字符串"runoob"的元素
```
a[src*="runoob"]
```
\[attribute~=value\] 属性中包含独立的单词为 value，例如：
~~~
[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />
~~~
# **类与id选择器**
```css
.classname{}
#idname{}
```
# **属性选择器**
选择name属性等于value的元素
```
[name=value]
```
选择 lang 属性等于 en，或者以 en- 为开头的所有元素
```
[lang|=en]
```
选择标题属性包含单词"flower"的所有元素
```
[title~=flower]
```
# **倍数**
```
div:nth-child(2n+1)
选择2倍的第二个元素：
div:nth-child(2n+2)
选择3倍的第一个元素：
div:nth-child(3n+1)
选择3倍的第二个元素：
div:nth-child(3n+2)
选择3倍的第三个元素：
div:nth-child(3n+3)
```
# **组合选择器**
相邻选择器：A+B
同辈选择器：A~B
儿子选择器：A >B
后代选择器:A B
```
<body>
<div>
<div id="i1" class="con1" data-a="a" disabled=true>1111111</div>
<div id="i2" class="con1" data-a="a" disabled=true>2222</div>
<div id="i3" class="con1 con2" data-a="a" disabled=true>3333</div>
</div>
<script type="text/javascript">
$(function($) {
console.log($("div[class=con1][data-a=a]"));//div#i1,div#i2
console.log($("div.con2[data-a=a]"));//div#i3
console.log($("div.con1[data-a=a]"));//div#i1,div#i2,div#i3
console.log($("div[class=con1][disabled=true]"));//div#i1,div#i2
console.log($("div.con2[disabled=true]"));//div#i3
console.log($("div.con1[disabled=true]"));//div#i1,div#i2,div#i3
console.log($(".con1.con2[disabled=true]"));//div#i3
})
</script>
</body>
```
## 获取input不为disabled的对象
```
$("input[id^='input_001']:not(:disabled)").each(function(){
console.log(this);
});
```
# **伪类**
## **:link**
用来选中元素当中所有尚未访问的链接【IE3】
## **:visited**
用来选中元素当中所有已经访问过的链接【IE7】
## **:hover**
选中鼠标指向的元素【IE7】
## **:active**
匹配被用户激活的元素,伪类一般被用在 a 和 button 或者label关联的表单元素中它代表的是用户按下按键和松开按键之间的时间。
【IE4只支持链接，IE8只支持所有元素】
>[danger]多个伪类时放置在最后，伪类先后顺序被称为 LVHA 顺序：:link — :visited — :hover — :active。
~~~html
<style type="text/css">
form :active {
color: red;
}
form button {
background: white;
}
</style>
<form>
<label for="my-button">My button: </label>
<button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>
~~~
```html
<style type="text/css">
a:link { color: blue; } /* 未访问链接 */
a:visited { color: purple; } /* 已访问链接 */
a:hover { background: yellow; } /* 用户鼠标悬停 */
a:active { color: red; } /* 激活链接 */
p:active { background: #eee; } /* 激活段落 */
</style>
<div style="width: 400px;height: 80px;border: 1px solid red">
<p >
<a href="#" >快点我就字会变红.鼠标悬停背景变黄</a>
段落或者段落上的a链接 鼠标按下不松开背景就会变灰
</p>
</div>
```
## **:focus**
当用户点击或触摸元素或通过键盘的 “tab” 键选择它获得焦点时会被触发（用于表单）【IE8】
## **:checked**
表示任何处于选中状态的radio(`<input type="radio">`), checkbox(`<input type="checkbox">`) 或select元素中的option【IE9】
## **:targe**
代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配，即匹配锚点对应的焦点目标元素【IE9】
```
<style>
:target{
background-color: pink;
}
</style>
<body>
<a href="#html">点击</p>
<p id="html">HTML中文网</p>
</body>
```
点击锚点，则跳转到目标元素且目标元素背景颜色改变
## **:disabled**
匹配任何被禁用的元素（如果一个元素不能获取焦点 或者 不能被激活（如选择、点击或接受文本输入），则该元素处于被禁用状态）【IE9】
~~~html
input[type="text"]:disabled {
background: #ccc;
}
<input type="text" placeholder="Name" disabled>
~~~
## **:enabled**
与上一个相反，匹配任何被启用的（enabled）元素
~~~css
/* 选择任何启用状态的 <input> */
input:enabled {
color: blue;
}
~~~
## **:empty**
匹配没有子元素的元素。子元素只可以是元素节点或文本（包括空格）【IE9】
```
td[contenteditable='true']:empty::before{
color: grey;
background-color: rgba(236,236,236,.075);
display:block;
content:"不同项目用,分隔";
}
td[contenteditable='true']:focus::before{
content: none;
}
```
>[danger]带-child与-type的唯一区别是，带-child必须要有父级元素
## **:first-child**
必须有父元素的情况下兄弟元素中的第一个子元素（为了兼容必须有父元素）【IE7】
IE7不能动态添加样式，IE8在失去焦点前不能添加
```
<style type="text/css">
p:first-child{
background-color: red;
}
</style>
<div style="width: 400px;height: 120px;border: 1px solid red">
<p>测试文本！</p>
<p lang="en">测试文本！</p>
<p lang="zh-cn">测试文本！</p>
</div>
<!-- 没有父元素没有效果 -->
<p>测试文本！</p>
<p lang="en">测试文本！</p>
<p lang="zh-cn">测试文本！</p>
```
## **:last-child**
在有父元素的情况下，匹配匹配指定的一组同辈元素中的最后一个元素【IE9】
p:last-child等同于p:nth-last-child(1)
```
<style type="text/css">
p:last-child{
background-color: red;
}
</style>
<div style="width: 400px;height: 120px;border: 1px solid red">
<p>测试文本！</p>
<p lang="en">测试文本！</p>
<p lang="zh-cn">测试文本！</p>
</div>
```
## **:nth-last-child(n)**
在有父元素的情况下，匹配匹配指定的一组同辈元素中倒数第N个元素【IE9】
## **:nth-child(n)**
在有父元素的情况下，匹配指定的一组同辈元素中指定的元素【IE9】
注意：Opera 不能处理动态插入的元素
```
<style type="text/css">
p:nth-child(1){
background-color: red;
}
</style>
<div style="width: 400px;height: 120px;border: 1px solid red">
<p>测试文本！</p>
<p lang="en">测试文本！</p>
<p lang="zh-cn">测试文本！</p>
</div>
同辈元素tr中的偶数行
tr:nth-child(even)
同辈元素tr中的奇数行
tr:nth-child(odd)
同辈元素span中为第一的并且名字为span的标签被选中
span:nth-child(1)
匹配前三个子元素中的span元素。
span:nth-child(-n+3)
```
## **:first-of-type**
匹配特定类型的一组同辈元素中第一个子元素，和:nth-of-type(1)效果一致【IE9】
注意IE将所有未知元素（如自定义元素）看作同一元素类型
```
//匹配p标签下的第一个元素
<style type="text/css">
p:first-of-type{
background-color: red;
}
</style>
<p>测试文本1！</p>
<p lang="en">测试文本2！</p>
<p lang="zh-cn">测试文本3！</p>
<div>
<p>测试1</p>
<p>测试2</p>
<p>测试3</p>
</div>
```
## **:last-of-type**
匹配特定类型的一组同辈元素中的最后一个子元素。和:nth-last-of-type(1)效果一样【IE9】
## **:nth-of-type(n)**
匹配同类型中的第n个同级兄弟元素【IE9】
```
<style>
p:nth-last-of-type(2)
{
background:pink;
}
</style>
<h1>元素1</h1>
<p>元素2</p>
<p>元素3</p>
<p>元素4</p>
```
## **:nth-last-of-type(n)**
匹配指定同辈元素下的倒数第n个元素
```
<style>
p:nth-last-of-type(1)
{
background:pink;
}
</style>
<h1>元素1</h1>
<p>元素2</p>
<p>元素3</p>
<p>元素4</p>
```
## **:only-child**
在有父级元素情况下，匹配没有任何兄弟元素的元素【IE9】
## **:only-of-type**
匹配没有任何兄弟元素的元素【IE9】
>[danger]带-child与-type的唯一区别是，带-child必须要有父级元素
## **:not()**
用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类【IE9】
能作为:not()参数的可以是以下任何一种的简单选择器：
1、标签选择器（例如p，span等）
2、类选择（例如.element，.sidebar等）
3、ID选择器（例如#header）
4、伪类选择器（例如:first-child，:last-of-type）
5、属性选择器（例如[type="checkbox"]）
6、通用选择器（*）
```
article:not(#featured):not(.tutorial) { /* 格式化文章 */ }
li ：not(.old)::after { content："" ; color：red; }
```
传递给:not()的参数不能是伪元素选择器（例如::before和::after等）或另一个否定伪类选择器
所以以下是无效 的:not()：
```
/* 无效 */
p:not(:not(.same)) {}//:not()不能被嵌套
p:not(:not(:last-child)) {}
:not(::first-letter) {}
a:not(::after) {}
selector（:matches(:not(..))
```
:not()伪类选择允许写入无用的选择。例如:not(\*)，它根本不代表任何元素将永远不会应用任何样式。
## **:root**
匹配文档树的根元素。对于 HTML 来说，:root 表示 html 元素，除了优先级更高之外，与 html 选择器相同【IE9】
## **:lang()**
基于元素语言来匹配页面元素【IE8】
~~~html
<html lang="zh-cn">
<body>
<style type="text/css">
p:lang(en){
background-color:#66cdcc;
color:red;
}
p:lang(zh-cn){
background-color:#66cdcc;
color:blue;
}
</style>
<div style="width: 400px;height: 120px;border: 1px solid red">
<p>测试文本！</p>
<p lang="en">测试文本！</p>
<p lang="zh-cn">测试文本！</p>
</div>
</body>
</html>
~~~
## **:valid**
内容验证正确的input或其他form元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式【IE10】
## **:invalid**
表示任意内容未通过验证的 input或其他 form 元素 .这个伪类对于突出显示用户的字段错误非常有用【IE10】
## **:required**
表示任意设置了required属性的input，select, 或 textarea元素。 这个伪类对于高亮显示在提交表单之前必须具有有效数据的字段非常有用。
>[danger]注意：:optional伪类选中'可选的'表单字段。【IE10】
## **:optional**
表示任意没有required属性的 input，select 或 textarea元素使用它。【IE10】
~~~html
<style>
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #C00000;
}
</style>
<form>
<label for="url_input">Enter a URL:</label>
<input type="url" id="url_input" />
<br />
<br />
<label for="email_input">Enter an email address:</label>
<input type="email" id="email_input" required/>
</form>
~~~
## **:default**
表示一组相关元素中的默认表单元素【IE不支持】
该选择器可以在` <button>`, `<input type="checkbox" checked>`, `<input type="radio" checked>`, 以及 `<option selected>` 上使用
```html
<style type="text/css">
input:default {
box-shadow: 0 0 2px 1px coral;
color: coral;
}
option:default {
color: coral;
}
button:default {
color: coral;
}
button:disabled {
color: blue;
}
</style>
<form>
<input type="checkbox" name="" checked>
<input type="radio" name="" checked>
<select>
<option value="1">1</option>
<option value="2" selected = "selected">2</option>
</select>
<!-- 文档所可以使用在button 但我没找出button:default样式生效的属性 -->
<button type="button" disabled>确定</button>
</form>
```
## **:defined**
表示任何已定义的元素【IE不支持】
这包括任何浏览器内置的标准元素以及已成功定义的自定义元素 (例如通过 CustomElementRegistry.define() 方法)。
## **:focus-within**
表示一个元素获得焦点，或，该元素的后代元素获得焦点【IE不支持】
举个例子：表单中的某个input字段获得焦点时，整个表单的form元素都可被高亮。
~~~css
form:focus-within {
background: #ff8;
color: black;
}
~~~
## **:host**
选择包含其内部使用的CSS的shadow DOM的根元素 - 换句话说，这允许你从其shadow DOM中选择一个自定义元素【IE不支持】
## **:host()**【IE不支持】
## **:indeterminate**
状态不确定的表单元素【IE不支持】
即多选框checkbox的indeterminate属性被js设置为true
多个name相同的单选框radio都未被选中
处于不确定状态的progress标签
## **:in-range**
代表一个 input 元素，其当前值处于属性min 和max 限定的范围之内.【IE不支持】
~~~html
<input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
~~~
## **:out-of-range**
表示一个 input 元素，其当前值处于属性 min 和 max 限定的范围外。【IE不支持】
## **:placeholder-shown**
在 input> 或 <textarea 元素显示 placeholder text 时生效.【IE10】
>[danger]ie10可用条件是`:-ms-input-placeholder`, firefox 4-5版本可用条件是`:-moz-placeholder`
## **:read-only**
表示元素不可被用户编辑的状态（如锁定的文本输入框）。【IE不支持】
## **:scope**
作为选择器要匹配的参考点的元素【IE不支持】
## **:where()**
CSS 伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。 :where() 和 :is() 的不同之处在于，:where() 的优先级总是为 0 ，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的【只有谷歌支持】
## **:read-write**
代表一个元素（例如可输入文本的 input元素）可以被用户编辑。【IE不支持】
## **@page:right**
需要和@规则 @page 配套使用, 表示打印文档的所有右页。.【Firefox不支持】
## **@page:first**
打印文档的时候，第一页的样式【多数浏览器不兼容】【Firefox不支持】
## **@page:left**
需要和@规则 @page 配套使用, 对打印文档的左侧页设置CSS样式.【Firefox不支持】
# **实验性质的伪类**
##
**:any-link**
## **:blank**
## **:current**
## **:dir()**
## **:drop**
## **:fullscreen**
## **:future**
## **:focus-visible**
## **:has()**
## **:host-context()**
## **:is()**
## **:local-link**
## **:nth-col()**
## **:nth-last-col()**
## **:past**
## **:target-within**
## **:user-invalid**
### 伪元素示例
#### 选前四个元素：
```
#nth-test div:nth-child(-n + 4) {
background-color: red;
}
```
#### 选第3个往后的所有元素：
```
#nth-test div:nth-child(n + 3) {
background-color: red;
}
```
#### 选偶数元素：
```
#nth-test div:nth-child(2n) {
background-color: red;
}
```
#### 选奇数元素：
```
#nth-test div:nth-child(2n+1) {
background-color: red;
}
```
#### 选中最后三个元素：
```
div:nth-last-child(-n+4){}
```
>[danger]**注意：上面括号里面的n必须要放在数字的前面，比如说你写(1+n)就会报错，只有(n+1)才对**
# **伪元素**
：是css2引入
：：是css3引入 ：：符号是用来区分伪类和伪元素的
## **::after (:after)**
创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素【IE9】
>[danger] IE8支持element:after{...}
我们可以看到很多类型的input都不支持伪类，buttom 、 number 、text 、 email 、datetime、url、tel、search、reset、password、hidden等等 select好像也不行
例：在a链接后添加一个元素，这个元素的内容为→
~~~
a::after {
content: "→"
~~~
```
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
li::after {
content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
}
```
例子：`.box3::after`将作为.box3的最后一个子元素
```
<style type="text/css">
.box3::after{
content: "";
display: block;
width: 100px;
height: 100px;
border: 1px solid deeppink;
}
</style>
<div class="box3"></div>
```
## **::before (:before)**
创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素【IE9】
>[danger] IE8支持element:after{...}
~~~
a::before {
content: "♥"
~~~
## **::cue (:cue)**
匹配所选元素中的WebVTT提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索。【IE不支持】
## **::first-letter (:first-letter)**
选中某块级标签元素第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）【IE9】
~~~css
/* 使每段开头的第一个字母变红变大 */
p::first-letter { /* 使用:first来兼容IE8- */
color: red;
font-size: 130%;
}
~~~
## **::first-line (:first-line)**
在某块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。 和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的html元素【IE9】
~~~css
<!-- 将每个段落中的第一行字母转换成大写 -->
p::first-line { text-transform: uppercase }
~~~
## **::selection**
应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）【IE9】
>[danger]注意：只有以下几个css才生效
color,background-color,cursor,caret-color,outline and its longhands,text-decoration 及相关属性,text-emphasis-color,text-shadow
```
::selection
{
color:green;
}
span ::selection
{
color:green;
}
```
## **::slotted()**
用于选定那些被放在 HTML模板 中的元素【IE不支持】
## **实验性质的伪元素**
## **::backdrop**
## **::grammar-error**
## **::marker**
## **::placeholder**
## **::spelling-error**
## **示例**
button[lichihua] 选取有lichihua的自定义属性的button标签元素
```
<button lichihua="disabled">lichihua</button>
```
button[disabled] 选取有disabled属性的button标签元素
```
<button disabled="disabled">lichihua</button>
```
input[type="submit"][disabled] 选取type="submit"并且有disabled属性的input标签元素
```
<input type="submit" disabled="disabled" name="" value="确定">
```
input.form-submit.disabled（拥有form-submit和disabled类的input）注意 input.form-submit这里的input和点之间没有空格！！！！
input[type="submit"].disabled （拥有disabled类并且type属性为submit的input）
input.form-submit[disabled] （拥有form-submit类并且拥有disabled属性的input）
input[type="submit"][disabled] （type属性为submit 并且拥有disabled属性的input）
<input type="submit" class="form-submit disabled" disabled="disabled" name="" id="editgroup" value="编辑角色组">
CSS3中，合理的使用通配符，可以大大提高效率，以下为测试示例。
“^”开头字母匹配；“$”结尾字符匹配；“*”包含字符匹配
对于类似下面的样式：可以用通配符
#name_1{margin-top:10px}
#name_2{margin-top:10px}
#name_3{margin-top:10px}
#name_4{margin-top:10px}，
可写作[id^="name_"]{margin-top:10px}
- CSS
- 达到指定宽度加载css
- 选择器
- CSS 函数
- @media媒体查询
- 字体
- 图标字体
- 文本
- 光标样式cursor
- 盒子模型
- 溢出（overflow）
- 边框
- 不透明度opacity
- 背景(background)与渐变xx-gradient
- 轮廓（outline）与 阴影(box-shadow)
- 过渡属性（Transition）
- 动画属性（Animation）
- transform变形效果旋转，缩放，移动，倾斜等
- 显示、隐藏与禁用
- box-sizing与resize
- 居中对齐
- css水平居中
- css垂直居中
- 文字与相邻的元素垂直对齐
- 布局
- 高度塌陷和外边距重叠最终解决方案
- 解决float布局时高度塌陷的最终方案after伪类元素
- 子/父元素外边距重叠最终解决方案before伪类元素
- 传统布局
- position布局
- position水平居中
- position垂直居中
- position水平垂直居中
- 浮动布局
- 高度塌陷和BFC
- clear
- BFC概念及触发条件
- 表格布局
- 盒子模型布局
- 盒子水平居中布局（如margin:0 auto）
- 盒子垂直居中布局
- 相邻元素外边距重叠
- 行内元素的盒子模型
- 弹性伸缩布局flex
- 旧版本（IE不支持）
- 混合过渡版（仅IE10+生效）
- flex布局（新版）
- 多列布局columns
- grid网格布局（实验性）
- 应用与总结
- 瀑布流布局
- 流式布局(响应式布局又叫百分比布局移动端一般采用)
- 用户不能鼠标左键选择文本
- 表格
- 表单
- radio
- textarea
- select
- a连接
- ul>li有序列表与ol>li无序列表
- 伪元素
- 容器宽高100%
- 浏览器四大内核及前缀
- 移动端开发
- 长度单位与移动端
- css_移动端开发
- rem具体解决方案
- vw具体解决方案
- 兼容性问题
- 浏览器默认样式
- css预处理器
- less
- sass
- stylus
- HTML
- 标签元素
- head的子标签
- 文档元素
- 文本元素
- 嵌入元素
- 分组元素
- 表格元素
- 表单元素
- input
- 标签元素的属性
- 全局属性
- aria-*
- 事件on*
- data-*
- id
- class
- hidden
- style
- title
- draggable
- dropzone(实验性)
- dir
- autocapitalize
- contenteditable
- lang
- inputmode
- accesskey
- contextmenu（移除）
- exportparts(实验性)
- is
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- XHTML遗留xml:lang和xml:base
- part（实验性）
- slot
- spellcheck（实验性）
- tabindex
- translate
- HTML字符实体
- 行内元素
- iframe和父页面相互传值,并兼容跨域问题
- a标签嵌套解决方案
- JS
- 获取宽度（offsetParent、clientWidth、clientHeight、offsetWidth、offsetheight、scrollWidth、scrollHeight、offsetTop、offsetLeft、scrollTop、scrollLeft）
- demo
- 全选和反选
- 定时器：
- 哪些HTML元素可以获得焦点？
- 事件例子
- 鼠标事件
- 注册条款
- 获取鼠标坐标
- div跟随鼠标移动
- 拖拽01
- 鼠标滚动事件
- 键盘事件
- 检查标签是否含有某个类
- 轮播图
- 数组的 交集 差集 补集 并集
- 精确计算插件
- 摇奖机
- 移动端跳转
- 基础
- js的数据类型
- 基本类型声明
- 引用类型声明及用法
- 数组
- 函数
- 对象及函数原型对象
- 继承
- js的垃圾回收机制
- javascript扩展自定义方法
- 类型转换
- 作用域（执行上下文）及递归调用
- javascript事件
- 连续调用
- 排序
- 内存溢出与内存泄漏
- 系统对象
- 内置对象
- 值属性
- Infinity
- NaN
- undefined
- globalThis
- Function 属性
- eval()
- isFinite()
- isNaN()
- parseFloat()
- parseInt()
- decodeURI()
- decodeURIComponent()
- encodeURI()
- encodeURIComponent()
- 基本对象（Object，Function，Boolean，Symbol）
- Object
- defineProperty()
- Function
- Boolean
- Symbol
- 数字和日期对象
- Number
- Date
- BigInt
- Math
- 控制抽象化
- AsyncFunction
- Generator
- GeneratorFunction
- Promise
- Web组装
- WebAssembly
- 结构化数据（JSON等）
- ArrayBuffer
- Atomics
- DataView
- JSON
- SharedArrayBuffer
- 使用键的集合对象
- Map
- Set
- WeakMap
- WeakSet
- 反射
- Reflect
- Proxy
- 可索引的集合对象(数组在这)
- Array数组
- BigInt64Array
- BigUint64Array
- Float32Array
- Float64Array
- Int16Array
- Int32Array
- Int8Array
- Uint8ClampedArray
- Uint8Array
- Uint16Array
- Uint32Array
- 国际化
- Intl
- Intl.Collator
- 文本处理(字符串与正则)
- RegExp
- String
- 错误对象
- Error
- InternalError
- AggregateError 实验性
- EvalError
- RangeError
- ReferenceError
- SyntaxError
- URIError
- TypeError
- null
- TypedArray
- escape()移除但还兼容
- unescape()移除但还生效
- uneval()非标准
- arguments
- 宿主对象（DOM与Browser）
- Browser浏览器对象（BOM）
- Window 对象
- History 对象
- Location 对象
- Navigator 对象
- Screen 对象
- 存储对象(localStorage与sessionStorage)
- DOM 节点对象
- EventTarget
- Node节点对象
- Document文档节点
- HTMLDocument(HTML对象 )
- HTML 元素接口
- Element元素节点
- Attr属性对象（与NamedNodeMap ）
- DocumentType
- DocumentFragment文档片段节点
- CharacterData
- Comment
- Text
- CDATASection
- 事件对象Event
- on-event处理器
- CustomEvent
- MouseEvent
- DragEvent
- 手势（TouchEvent触摸事件）
- 其他类型事件对象...
- CSSStyleDeclaration 对象
- HTMLCollection
- console对象
- MutationObserver
- 其他重要的对象（FormData与原生Ajax）
- FormData表单对象
- ajax XMLHttpRequest
- 表达式和运算符
- 算术运算符
- 赋值运算符
- 按位操作符
- 逗号操作符
- 比较操作符
- 条件运算符
- 解构赋值
- 函数表达式
- 圆括号运算符
- 逻辑运算符
- Nullish 合并操作符
- 对象初始化
- 运算符优先级
- 可选链
- 管道操作符 实验性
- 属性访问器
- 展开语法
- 异步函数表达式
- await
- 类表达式
- delete 操作符
- function* 表达式
- in
- instanceof
- new 运算符
- new.target
- super
- this
- typeof
- void 运算符
- yield
- yield*
- 语句和声明
- export
- default
- 控制流
- block
- break
- continue
- empty
- if...else
- switch
- throw
- try...catch
- 声明
- const
- let
- var 描述
- 函数和类
- async function
- class
- function
- function*
- return
- 迭代
- do...while
- for
- for await...of
- for...in
- for...of
- while
- 其他
- debugger
- label
- with 移除但生效
- import
- import.meta
- 函数
- 箭头函数
- 默认参数值
- 方法的定义
- 剩余参数
- Arguments 对象
- getter
- setter
- 类
- 类私有域
- 类元素
- 构造方法
- extends
- static
- Errors
- 更多
- 已废弃的特性
- JavaScript 数据结构
- 词法文法
- 属性的可枚举性和所有权
- 迭代协议
- 严格模式
- 切换到严格模式
- 模板字符串
- ES6(ES2015)
- Es6函数写法
- 类class
- 导入导出模块
- 兼容ES5
- 变量声明
- Symbol新数据类型
- 迭代器（自定义遍历数组）
- 生成器
- Promise异步编程
- set(集合)
- Map
- 数组新增4个方法
- 手机端事件
- bootstrap手册
- 代码压缩打包
- Webpack
- 五个核心概念
- 开始
- loader
- 插件
- webpack开发环境配置
- 打包含css文件的项目
- 打包html资源
- 打包图片资源
- 打包其他文件
- devServer（实时自动化打包）
- 总结：开发环境配置
- webpack生产环境配置
- 提取css成单独文件
- css兼容性处理
- 压缩css
- js语法检查
- js兼容性处理
- js压缩
- html压缩
- 总结：生产环境配置
- webpack优化环境配置
- HMR( 模块热替换)
- source-map
- oneOf
- 缓存
- tree shaking
- code split
- demo1
- demo2
- demo3
- lazy loading
- pwa
- 多进程打包
- externals
- dll
- webpack配置详解
- entry
- output
- module
- resolve
- dev server
- optimization
- vite
- 技能
- 前端学习路线
- 调试
- 多个版本IE浏览器（调试用）
- 手机端调试
- vueJS
- Element UI（一个vuejs组件）
- 浏览器插件开发
- 插件推荐
- 扩展文件manifest.json
- 不可视的background(常驻)页面
- 可视页面browser actions与page actions及八种展示方式
- 使用chrome.xxx API
- Google Chrome扩展与Web页面/服务器之间的交互
- Google Chrome扩展中的页面之间的数据通信
- inject-script
- chromeAPI
- pageAction
- alarms
- chrome.tabs
- chrome.runtime
- chrome.webRequest
- chrome.window
- chrome.storage
- chrome.contextMenus
- chrome.devtools
- chrome.extension
- 分类
- homepage_url 开发者或者插件主页
- 5种类型的JS对比及消息通信
- 其它补充
- 谷歌浏览器截屏
- 框架及工具
- 前端UI设计网站
- 网页中使用Unicode字符