选择器
- 通用选择器（*），选择所有元素
- id 选择器（#box），选择 id 为 box 的元素
- 类选择器（.one），选择类名为 one 的所有元素
- 标签选择器（div），选择标签为 div 的所有元素
- 群组选择器（div,p），选择 div、p 的所有元素
- 伪类选择器
css
:link 选择未被访问的链接
:visited 选取已被访问的链接
:active 选择活动链接
:hover 鼠标指针浮动在上面的元素
:focus 选择具有焦点的
:first-child 父元素的首个子元素
/* CSS3 */
:first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:only-child 表示没有任何兄弟的元素
:nth-child(n) 根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数
:last-child 表示一组兄弟元素中的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择与 <selector> 不匹配的所有元素:link 选择未被访问的链接
:visited 选取已被访问的链接
:active 选择活动链接
:hover 鼠标指针浮动在上面的元素
:focus 选择具有焦点的
:first-child 父元素的首个子元素
/* CSS3 */
:first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:only-child 表示没有任何兄弟的元素
:nth-child(n) 根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数
:last-child 表示一组兄弟元素中的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择与 <selector> 不匹配的所有元素- 伪元素选择器
css
::first-letter 用于选取指定选择器的首字母
::first-line 选取指定选择器的首行
::before 选择器在被选元素的内容前面插入内容
::after 选择器在被选元素的内容后面插入内容::first-letter 用于选取指定选择器的首字母
::first-line 选取指定选择器的首行
::before 选择器在被选元素的内容前面插入内容
::after 选择器在被选元素的内容后面插入内容属性选择器
css
[attribute] 选择带有 attribute 属性的元素
[attribute=value] 选择所有使用 attribute=value 的元素
[attribute~=value] 选择 attribute 属性 包含 value 的元素
/* CSS3 */
[attribute|=value] 选择 attribute 属性 以 value 开头的元素
[attribute*=value] 选择 attribute 属性值 包含 value 的所有元素
[attribute^=value] 选择 attribute 属性 开头为 value 的所有元素
[attribute$=value] 选择 attribute 属性 结尾为 value 的所有元素[attribute] 选择带有 attribute 属性的元素
[attribute=value] 选择所有使用 attribute=value 的元素
[attribute~=value] 选择 attribute 属性 包含 value 的元素
/* CSS3 */
[attribute|=value] 选择 attribute 属性 以 value 开头的元素
[attribute*=value] 选择 attribute 属性值 包含 value 的所有元素
[attribute^=value] 选择 attribute 属性 开头为 value 的所有元素
[attribute$=value] 选择 attribute 属性 结尾为 value 的所有元素- 关系选择器
css
p *: 后代通用选择器
p img: 后代选择器
p > img: 子代选择器
p + img: 邻接兄弟选择器
p ~ img: 通用兄弟选择器，即使它们不直接相邻p *: 后代通用选择器
p img: 后代选择器
p > img: 子代选择器
p + img: 邻接兄弟选择器
p ~ img: 通用兄弟选择器，即使它们不直接相邻选择器的优先级
!important > 内联 > ID 选择器 > 类选择器 > 标签选择器
JS 使用选择器
js
// 访问全部
document.all; // 等同于 Element.querySelectorAll("*")
// 访问特定
Element.querySelector(selectors); // 返回单个。
Element.querySelectorAll(selectors); // 返回集合。
Element.getElementById(id); // 返回单个；id 区分大小写且唯一。
Element.getElementsByClassName(names); // 返回集合；names 字符串类名，多个类名用空格分隔。
Element.getElementsByName(name); // 元素属性 name 的属性值（<input name="up" /> 使用 getElementsByName("up")）
Element.getElementsByTagName(tagName); // 元素的名称（或 “*”）
Element.getElementsByTagNameNS(namespace, name); // 不常用，略。// 访问全部
document.all; // 等同于 Element.querySelectorAll("*")
// 访问特定
Element.querySelector(selectors); // 返回单个。
Element.querySelectorAll(selectors); // 返回集合。
Element.getElementById(id); // 返回单个；id 区分大小写且唯一。
Element.getElementsByClassName(names); // 返回集合；names 字符串类名，多个类名用空格分隔。
Element.getElementsByName(name); // 元素属性 name 的属性值（<input name="up" /> 使用 getElementsByName("up")）
Element.getElementsByTagName(tagName); // 元素的名称（或 “*”）
Element.getElementsByTagNameNS(namespace, name); // 不常用，略。JS DOM 操作
js
// 批量操作
Element.replaceChildren(param1, param2, /* …, */ paramN); // children 全部替换
Element.before(param1, param2, /* …, */ paramN); // self 前插入
Element.after(param1, param2, /* …, */ paramN); // self 后插入
Element.prepend(param1, param2, /* …, */ paramN); // children 前插入
Element.append(param1, param2, /* …, */ paramN); // children 后插入
// 单个操作
Element.appendChild(newNode); // children 后插入
Element.insertBefore(newNode, referenceNode); // referenceNode 前插入
Element.removeChild(Node); // child 删除
Element.replaceChild(newChild, oldChild); // oldChild 替换
Element.remove(); // self 删除// 批量操作
Element.replaceChildren(param1, param2, /* …, */ paramN); // children 全部替换
Element.before(param1, param2, /* …, */ paramN); // self 前插入
Element.after(param1, param2, /* …, */ paramN); // self 后插入
Element.prepend(param1, param2, /* …, */ paramN); // children 前插入
Element.append(param1, param2, /* …, */ paramN); // children 后插入
// 单个操作
Element.appendChild(newNode); // children 后插入
Element.insertBefore(newNode, referenceNode); // referenceNode 前插入
Element.removeChild(Node); // child 删除
Element.replaceChild(newChild, oldChild); // oldChild 替换
Element.remove(); // self 删除