css选择器备忘录 {mtitle title="目录信息"/}啥是CSS选择器通用选择器 - *元素选择器 - element类名选择器 - .classID 选择器 - #id多选择器 - .class.class-2逗号组合 - .class, .class-2后代选择器 - .class .class-2相邻兄弟选择器 - .class + .class-2子选择器 - .class > .class-2兄弟选择器 - .class ~ .class-2脑残猫头鹰选择器 - + 属性选择器 - []链接伪类选择器input相关第N个孩子指定类型的第N个孩子伪类选择器伪元素0. 啥是CSS选择器CSS选择器 是用于选择 HTML 元素并为其应用样式的一种机制。选择器允许我们根据元素的 类型 、 属性 、 位置 以及其他特征来选择要样式化的元素，从而实现对网页样式的精确控制。以下是一些常见的 CSS 选择器及其用途：「元素选择器（Element Selector）」 ：选择指定类型的 HTML 元素。例如， p 选择所有段落元素。「类选择器（Class Selector）」 ：选择具有指定类名的元素。以点号（ . ）开头，后跟类名。例如， .button 选择所有类名为 button 的元素。「ID 选择器（ID Selector）」 ：选择具有指定 ID 的元素。以井号（ # ）开头，后跟 ID 名称。例如， #header 选择 ID 为 header 的元素。「后代选择器（Descendant Selector）」 ：选择指定元素的后代元素。使用 空格 分隔两个选择器，其中第一个选择器表示 父元素第二个选择器表示 后代元素例如， div p 选择所有 <div> 元素内部的所有段落 <p> 元素。「相邻兄弟选择器（Adjacent Sibling Selector）」 ：选择紧接在另一个元素后面的元素。使用加号（ + ）符号连接两个选择器，其中第一个选择器表示 第一个元素第二个选择器表示其 紧邻的兄弟元素例如， h2 + p 选择所有紧接在 <h2> 元素后面的 <p> 元素。「通用选择器（Universal Selector）」 ：选择页面中的 「所有元素」 。使用星号（ * ）表示。例如， * 选择页面中的所有元素。除了这些基本的选择器外，CSS 还提供了许多其他类型的选择器，如 伪类选择器 （例如 :hover 、 :active ）、 伪元素选择器 （例如 ::before 、 ::after ）、 属性选择器 （例如 [type="text"] ）等，可以根据具体的需求选择合适的选择器来对页面元素进行样式化。{dotted startColor="#ff6c6c" endColor="#1989fa"/}1. 通用选择器 - *CSS的 通用选择器 是一个星号（ * ），它匹配文档中的 「任何元素」 。使用通用选择器，我们可以选择页面上的 「所有元素」 ，并为它们应用相同的样式。例如，如果我们想为页面上的所有元素设置相同的字体样式，我们可以使用通用选择器来实现。{callout color="#2bff00"}但要注意，过度使用通用选择器可能会导致 「性能问题」 ，因为它会匹配页面上的所有元素，包括嵌套元素，这可能会增加浏览器的渲染负担。因此，建议在必要时谨慎使用通用选择器。{/callout}{dotted startColor="#ff6c6c" endColor="#1989fa"/}2. 元素选择器 - element元素选择器 是 CSS 中最简单的选择器之一，它通过指定 HTML 元素的名称来选择元素。例如，要选择所有段落元素 <p> ，我们可以使用以下选择器：p { /* CSS 样式 */ }这将选择页面中的所有段落元素，并应用所指定的 CSS 样式。{dotted startColor="#ff6c6c" endColor="#1989fa"/}3. 类名选择器 - .class类选择器 用于选择具有特定类名的 HTML 元素。类选择器以点号（ . ）开头，后跟类名。例如，如果我们有一个类名为 button 的按钮元素，我们可以使用类选择器来选择它：.button { /* CSS 样式 */ }这将选择页面中所有具有类名 button 的元素，并应用所指定的 CSS 样式。类选择器使我们可以为页面中的 「多个元素定义相同的样式」 ，而不必重复定义。此外，一个元素可以同时具有多个类，这样就可以轻松地将多个样式应用于同一个元素。{dotted startColor="#ff6c6c" endColor="#1989fa"/}4. ID 选择器 - #idID 选择器 是 CSS 中用于选择具有特定 ID 属性的 HTML 元素的选择器。ID 选择器以井号（ # ）开头，后跟 ID 名称。例如，如果我们有一个 ID 为 my-id的标题元素，我们可以使用 ID 选择器来选择它：#my-id { /* CSS 样式 */ }这将选择页面中具有 ID 名称为 my-id 的元素，并应用所指定的 CSS 样式。 「与类选择器不同，ID 选择器应该是唯一的」 ，因为 HTML 页面中每个元素的 ID 必须是唯一的。ID 选择器通常用于 「为特定元素应用唯一的样式」 。{dotted startColor="#ff6c6c" endColor="#1989fa"/}5. 多选择器 - .class.class-2.class.class-2 表示连接两个或更多类或ID来选择具有所有指定类/ID的元素：这段CSS代码的意思是选择具有 .my-class 和 .special 两个类的元素，并设置对应的背景色。{dotted startColor="#ff6c6c" endColor="#1989fa"/}6. 逗号组合 - .class, .class-2使用 逗号分隔 多个选择器声明。这样可以轻松地 「将相同的样式应用于多个选择器声明」 ;{dotted startColor="#ff6c6c" endColor="#1989fa"/}7. 后代选择器 - .class .class-2后代选择器 用于 「选择特定元素的后代元素」 。后代选择器使用 「空格分隔两个选择器」 ，其中第一个选择器表示 父元素第二个选择器表示 后代元素例如，如果我们想选择所有 <div> 元素内部的所有段落 <p>，我们可以使用后代选择器：div p { /* CSS 样式 */ }这将选择所有在 <div> 元素内部的 <p>元素，并应用所指定的 CSS 样式。后代选择器允许我们更精确地定位特定元素，而不受页面结构的限制。{dotted startColor="#ff6c6c" endColor="#1989fa"/}8. 相邻兄弟选择器 - .class + .class-2相邻兄弟选择器 它用于选择 「紧接」 在另一个元素后面的元素。相邻兄弟选择器使用加号（ + ）符号来连接两个选择器，其中第一个选择器表示 第一个元素第二个选择器表示 紧跟在其后的兄弟元素例如，如果我们想选择所有紧跟在 <h2> 元素后面的段落 <p> 元素，我们可以使用相邻兄弟选择器：h2 + p { /* CSS 样式 */ }这将选择紧接在 <h2> 元素后面的 <p> 元素，并应用所指定的 CSS 样式。相邻兄弟选择器允许我们 「根据元素之间的特定关系来选择元素」，从而使得样式的应用更加精确和有针对性。{dotted startColor="#ff6c6c" endColor="#1989fa"/}9. 子选择器 - .class > .class-2子选择器 用于选择特定元素的 「直接子元素」 。子选择器使用大于号（ > ）符号来连接两个选择器，其中第一个选择器表示 父元素第二个选择器表示其 直接子元素例如，如果我们想选择所有 <ul> 元素下的直接子元素 <li> ，我们可以使用子选择器：ul > li { /* CSS 样式 */ }这将选择所有直接位于 <ul> 元素内部的 <li> 元素，并应用所指定的 CSS 样式。子选择器 「只会选择指定元素的直接子元素，而不会选择嵌套在更深层次的子元素」 。这使得子选择器非常有用，因为它可以帮助我们更精确地定位特定层次结构的元素，并应用相应的样式。{dotted startColor="#ff6c6c" endColor="#1989fa"/}10. 兄弟选择器 - .class ~ .class-2兄弟选择器 用于 「选择与指定元素具有相同父元素且位于其后面的所有兄弟元素」 。一般兄弟选择器使用波浪号（ ~ ）符号来连接两个选择器，其中第一个选择器表示 基准元素第二个选择器表示 它的兄弟元素例如，如果我们想选择所有与 <h2> 元素具有相同父元素且位于其后面的 <p> 元素，我们可以使用一般兄弟选择器：h2 ~ p { /* CSS 样式 */ }这将选择所有与 <h2> 元素具有相同父元素且位于其后面的 <p> 元素，并应用所指定的 CSS 样式。{callout color="#2bff00"} 兄弟选择器 允许我们选择与指定元素具有相同父元素且位于其后面的所有兄弟元素，而不仅仅是直接的兄弟元素。{/callout}{dotted startColor="#ff6c6c" endColor="#1989fa"/}11. 脑残猫头鹰选择器 - + 脑残猫头鹰选择器 用来描述一种特定的 CSS 模式。它涉及选择多个元素并为它们应用共享样式，从而在网页的各个组件或部分中创建一致的视觉设计。术语 脑残 指的是通用选择器（ * ）与相邻兄弟选择器（ + ）结合使用的情况。 猫头鹰 可能指的是 CSS 选择器的形态类似于猫头鹰的头部和眼睛。以下是“脑残猫头鹰”选择器模式的示例：* + * { margin-top: 1.5em; }这个 CSS 规则选择了在另一个元素之后出现的任何元素（除了容器中的第一个元素），并在顶部应用了一定的边距，有效地使元素均匀地间隔开来。这种模式特别适用于在为 「容器内的元素添加间距，但第一个元素没有前置兄弟元素」 。当然，我们也可以使用 :not(:first-child) 来达到相同的效果。{dotted startColor="#ff6c6c" endColor="#1989fa"/}12. 属性选择器属性选择器 它允许我们根据元素的属性及其属性值来选择元素，并为其应用样式。属性选择器使用方括号（ []）表示，内部包含属性名和可选的属性值。存在性属性选择器选择具有指定属性的元素，不论其属性值是什么。[data-text] { /* CSS 样式 */ }选择所有具有 data-text 属性的元素，并为其应用样式。这个选择器 「不关心属性的值是什么，只要有这个属性就会被选中」值属性选择器选择具有指定属性和特定值的元素。[data-text="hello"] { /* CSS 样式 */ }选择所有 data-text 属性的值为 hello 的元素，并为其应用样式。{callout color="#2bff00"}只有属性值为 hello 的元素才会被选中。{/callout}部分值属性选择器选择具有指定属性，并且属性值包含特定值的元素。[title*="saur"] { /* CSS 样式 */ }选择所有 title 属性值中包含 saur子字符串 的元素，并为其应用样式。{callout color="#2bff00"}只要属性值包含 saur ，无论是在开头、中间还是结尾，都会被选中。{/callout}起始值属性选择器选择具有指定属性，且属性值以特定值开头的元素。a[href^="https://"] { /* CSS 样式 */ }选择所有 href 属性值以 https:// 开头的 <a> 元素，并为其应用样式。{callout color="#2bff00"}只有链接以 https:// 开头的 <a> 元素才会被选中。{/callout}结束值属性选择器选择具有指定属性，且属性值以特定值结尾的元素。[src$=".png"] { /* CSS 样式 */ }选择所有 src 属性值以 .png 结尾的元素，并为其应用样式。{callout color="#2bff00"}只有图片路径以 .png 结尾的元素才会被选中。{/callout}包含值属性选择器选择具有指定属性，且属性值包含特定值的元素，且值之间以空格分隔。[class~="active"] { /* CSS 样式 */ }选择所有具有包含 active 的类名的元素，并为其应用样式。{callout color="#2bff00"}这个选择器将选中所有具有 active 类的元素，无论它们的类名是 active 还是 some-active-class 等。{/callout}{dotted startColor="#ff6c6c" endColor="#1989fa"/}13. link伪类选择器以下四个伪类用于选择各种状态下的 link 等元素。这四个伪类通常与链接一起使用，但是 :active 对于 button 也很有用，而 :hover 可以用于所有类型的元素：:link 　　　　选择未访问的 link 。它允许我们为用户尚未点击的超链接设置样式。:visited 　　　　选择用户已经访问过的 link 。这个伪类允许我们为以前点击过的超链接应用样式。:hover 　　　　当用户的指针（例如鼠标光标）悬停在元素（通常是链接）上时，选择这些元素。:active 　　　　选择在它们被激活时的元素（通常是链接或按钮），例如当用户点击它们时。{dotted startColor="#ff6c6c" endColor="#1989fa"/}14. input相关在前端项目中， input 有很大的用处。我们来看 MDN 关于 input 的介绍。所以，和 input 相关的选择器也很多。{callout color="#2bff00"}元素聚焦 - :focus{/callout} :focus 伪类选择器表示获得焦点的元素（如表单输入）。当用户点击或轻触一个元素或使用键盘的 Tab 键选择它时，它会被触发。元素选中 - :checked{/callout}:checked 伪类选择器用于选择当前被选中/勾选的 单选按钮 、 复选框 或选择元素中的选项。input[type='checkbox'] { all: unset; -webkit-appearance: none; appearance: none; margin: 0; } input[type='checkbox']:checked + label { background: mediumseagreen; } input[type='checkbox']:focus + label { box-shadow: 0 0 0 2px yellow; }在上面的示例中，我使用 appearance: none 来移除复选框输入框的默认样式{callout color="#2bff00"}元素禁用 - :disabled{/callout}:disabled 伪类匹配 「禁用」 的表单元素，例如 button 或 input {callout color="#2bff00"}元素可用 - :enabled{/callout}:enabled 伪类匹配可以交互并接收输入的表单元素{callout color="#2bff00"}元素验证 - :valid{/callout} :valid 伪类用于定位具有内容符合其属性规定要求（如 pattern 、 type 等）的输入元素：{callout color="#2bff00"}元素验证- :invalid{/callout} :invalid 伪类用于定位内容不符合要求的输入元素：{callout color="#2bff00"}元素必填 - :required{/callout} :required 伪类用于定位具有 required 属性的输入元素，表明在提交表单之前必须填写它们：{callout color="#2bff00"}元素可选 - :optional{/callout} :optional 伪类用于定位没有 required 属性的输入元素，表示它们不是必填项：{dotted startColor="#ff6c6c" endColor="#1989fa"/}15. 第N个孩子{callout color="#2bff00"}第一个孩子 - :first-child{/callout}:first-child 伪类用于定位其 「父元素内的第一个子元素」 ：{callout color="#2bff00"}最后一个孩子 - last-child{/callout}:last-child 伪类用于定位其父元素内的最后一个子元素：{callout color="#2bff00"}第N个孩子 - :nth-child{/callout}:nth-child 伪类根据元素在其父元素中的位置进行选择，允许进行各种各样的选择。:nth-child 还可以让我们按模式选择元素：:nth-child(odd) 或 :nth-child(2n+1) 选择 「每个奇数位置」 的子元素:nth-child(even) 或 :nth-child(2n) 选择 「每个偶数位置」 的子元素公式中的 n 就像一个计数器，让我们可以在重复循环中选择元素。{callout color="#2bff00"}第N个孩子(倒数) - :nth-last-child{/callout}:nth-last-child 伪类类似于 :nth-child ，但它是从 「最后一个子元素开始向后计数」 的{callout color="#2bff00"}元素的唯一子元素 - :only-child{/callout}如果某个元素是其父元素的 「唯一子元素」 ，则 :only-child 伪类将其作为目标元素：{dotted startColor="#ff6c6c" endColor="#1989fa"/}16. 指定类型的第N个孩子{callout color="#2bff00"}类型的第一个元素 - :first-of-type{/callout}:first-of-type 伪类的目标是其父级中 「该类型的第一个元素」 ：{callout color="#2bff00"}类型的最后一个元素 - :last-of-type{/callout}:last-of-type 伪类的目标是其父级中 「该类型的最后一个元素」 {callout color="#2bff00"}类型的第N个元素 - :nth-of-type{/callout}:nth-of-type 伪类根据元素的类型和兄弟元素中的位置来匹配元素{callout color="#2bff00"}类型的第N个元素(向后计数) - :nth-last-of-type{/callout}:nth-last-of-type 伪类根据元素的类型和兄弟元素中的位置来匹配元素，但从末尾开始计数{callout color="#2bff00"}其类型的唯一元素 - :only-of-type{/callout}:only-of-type 伪类的目标元素是其兄弟元素中该类型的唯一元素：{dotted startColor="#ff6c6c" endColor="#1989fa"/}17. 伪类选择器{callout color="#2bff00"}目标元素选择器- .target{/callout}:target 伪类选择具有与 URL 片段匹配的 ID 属性的元素（例如： https://example.com/#fragment ）。 :target 经常用于为直接链接到的页面部分设置样式，通常 「与页面内链接一起使用」 。{callout color="#2bff00"}否定伪类 - .not(){/callout}:not()函数伪类 允许我们定位与指定选择器或条件不匹配的元素。它本质上是一个 「过滤器」 ：{callout color="#2bff00"}父选择器 - :has(){/callout}:has()函数伪类 允许在元素包含某个元素或另一个选择器时对其进行样式设置：{callout color="#2bff00"}其他伪类{/callout}:root ：选择文档中最高级别的父元素，通常是 HTML 文档中的 <html> 元素。用于定义 CSS 变量，这些变量将对页面内所有元素可用。:is() ：匹配可以是多个选择器之一的元素，使得长选择器列表更简洁易读。例如， :is(h1, h2, h3) 可以匹配这三个标题元素中的任何一个。:where() ：类似于 :is() ，但允许根据条件选择元素，而不影响选择器的特异性。:default ：匹配设置为其默认选择状态的 UI 元素（例如单选按钮或复选框）。:empty ：选择没有子元素的元素（包括文本节点）。:fullscreen ：选择当前以全屏模式显示的元素。:in-range ：匹配值在指定范围内的表单元素（使用 min 和 max 属性）。 :out-of-range ：匹配值在指定范围之外的表单元素。:indeterminate ：选择状态不确定的表单元素，例如既不选中也不取消选中的复选框（通常在树形视图结构中看到）。:read-only ：匹配由于 readonly 属性而无法由用户编辑的表单元素。:read-write ：选择用户可以编辑的表单元素，意味着它们不是只读的。:lang() ：根据其语言属性匹配元素。例如， :lang(en) 选择用英语定义的元素。{dotted startColor="#ff6c6c" endColor="#1989fa"/}18. 伪元素{callout color="#2bff00"}第一个子伪元素 - ::before{/callout}::before 伪元素用于在元素内容之前插入内容。它可用于添加装饰内容、图标或其他不需要在实际 DOM 中的元素：{callout color="#2bff00"}最后一个子伪元素 - ::after{/callout}::after 伪元素与 ::before 类似，用于在元素内容之后插入内容：{callout color="#2bff00"}首字母伪元素- ::first-letter{/callout}::first-letter 伪元素用于设置块级元素的 「第一个字母的样式」 ，允许使用首字下沉等设计元素：{callout color="#2bff00"}首行伪元素 - ::first-line{/callout}::first-line 伪元素用于设置块级元素第一行的样式。这允许印刷效果可以根据包含元素的大小和字体大小动态调整：{callout color="#2bff00"}文本输入占位符 - ::placeholder{/callout}::placeholder 伪元素用于设置表单字段（如 <input> 和 <textarea> ）的占位符文本的样式：{callout color="#2bff00"}样式突出显示框 - ::selection{/callout}::selection 伪元素用于设置元素中已突出显示或由用户选择的部分的样式。例如，当用户单击并拖动以选择文本时， ::selection 伪元素可用于修改该选择的背景颜色、文本颜色和其他样式：{callout color="#2bff00"}列表标记伪元素 - ::marker{/callout}::marker 伪元素用于设置列表项中标记框的样式，列表项通常包含项目符号（对于无序列表）或数字/字母（对于有序列表）。在引入 ::marker 伪元素之前，自定义这些标记通常需要解决方法，但这个伪元素给了我们更多的控制权：{dotted startColor="#ff6c6c" endColor="#1989fa"/}原文出处:https://mp.weixin.qq.com/s/8Zhw-obLYrsPPXqkaqW5wA

JS Document.evaluate()的使用 Document 接口的 evaluate() 方法根据参数中给出的 XPath 表达式选择元素。 XPath 表达式可以在 HTML 和 XML 文档上进行计算。Syntaxjsevaluate(xpathExpression, contextNode, namespaceResolver, resultType, result)ParametersxpathExpression　表示要评估的 xpath 的字符串。contextNode　查询的上下文节点（请参阅 XPath specificatio ）。通常将 document 作为上下文节点传递。namespaceResolver　将传递任何命名空间前缀的函数，并应返回表示与该前缀关联的命名空间 URI 的字符串。它将用于解析 xpath 本身内的前缀，以便它们可以与文档匹配。 null 值对于 HTML 文档或不使用命名空间前缀时很常见。resultType　与要返回的结果 XPathResult 的类型相对应的整数。以下值是可能的：　ANY_TYPE (0)　　无论什么类型都会自然地由给定的表达式产生。　NUMBER_TYPE (1)　　包含单个数字的结果集。例如，在使用 count() 函数的 xpath 表达式中很有用。　STRING_TYPE (2)　　包含单个字符串的结果集。　BOOLEAN_TYPE (3)　　包含单个 boolean 值的结果集。例如，使用 not() 函数的 xpath 表达式很有用。　UNORDERED_NODE_ITERATOR_TYPE (4)　　包含与表达式匹配的所有节点的结果集。结果集中的节点不一定与它们在文档中出现的顺序相同。　　注意：此类型的结果包含对文档中节点的引用。修改节点将使迭代器失效。修改节点后，尝试迭代结果将导致错误。　ORDERED_NODE_ITERATOR_TYPE (5)　　包含与表达式匹配的所有节点的结果集。结果集中的节点的顺序与它们在文档中出现的顺序相同。　　注意：此类型的结果包含对文档中节点的引用。修改节点将使迭代器失效。修改节点后，尝试迭代结果将导致错误。　UNORDERED_NODE_SNAPSHOT_TYPE (6)　　包含与表达式匹配的所有节点的快照的结果集。结果集中的节点不一定与它们在文档中出现的顺序相同。　　注意：这种类型的结果是快照，本质上是匹配节点的列表。您可以通过更改快照节点来更改文档。修改文档不会使快照失效；但是，如果文档发生更改，快照可能与文档的当前状态不对应，因为节点可能已移动、更改、添加或删除。　ORDERED_NODE_SNAPSHOT_TYPE (7)　　包含与表达式匹配的所有节点的快照的结果集。结果集中的节点的顺序与它们在文档中出现的顺序相同。　　注意：这种类型的结果是快照，本质上是匹配节点的列表。您可以通过更改快照节点来更改文档。修改文档不会使快照失效；但是，如果文档发生更改，快照可能与文档的当前状态不对应，因为节点可能已移动、更改、添加或删除。　ANY_UNORDERED_NODE_TYPE (8)　　包含与表达式匹配的任何单个节点的结果集。该节点不一定是文档中与表达式匹配的第一个节点。　FIRST_ORDERED_NODE_TYPE (9)　　包含文档中与表达式匹配的第一个节点的结果集。result　用于获取结果的现有 XPathResult 。如果设置为 null 该方法将创建并返回一个新的 XPathResult 。Return value链接到所选节点的 XPathResult 。如果 result 是 null ，则它是一个新对象，如果不是，则它与作为 result 参数传递的对象相同Examplesjsconst headings = document.evaluate( "/html/body//h2", document, null, XPathResult.ANY_TYPE, null, ); /* 在文档中搜索所有 h2 元素。* 结果可能是一个无序的节点迭代器。*/ let thisHeading = headings.iterateNext(); let alertText = "Level 2 headings in this document are:\n"; while (thisHeading) { alertText += `${thisHeading.textContent}\n`; thisHeading = headings.iterateNext(); } alert(alertText); // 提醒所有 h2 元素的文本请注意，在上面的示例中，更详细的 xpath 优于常见的快捷方式（例如 //h2 ）。一般来说，如上例所示，更具体的 xpath 选择器通常会带来显着的性能改进，尤其是在非常大的文档上。这是因为评估查询所花费的时间不会浪费时间访问不必要的节点。使用 // 通常很慢，因为它会访问根节点和所有子节点中的每个节点以查找可能的匹配项。通过仔细使用上下文参数可以实现进一步的优化。例如，如果您知道要查找的内容位于 body 标记内的某个位置，则可以使用以下内容：jsdocument.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null);请注意，上面使用 document.body 而不是 document 作为上下文，因此 xpath 从 body 元素开始。（在此示例中， "." 非常重要，它表明查询应从上下文节点 document.body 开始。如果省略 "." （留下 //h2 ），则查询将从根节点 ( html ) 开始，这会更有效。浪费。）请参阅 Introduction to using XPath in JavaScript 了解更多信息。Specifications{card-describe title="Specification"} DOM 标准 # dom-xpathevaluatorbase-evaluate {/card-describe}原文出处：https://runebook.dev/zh/docs/dom/document/evaluate#xpathexpression

11个开源免费Web代码编辑器 基于Web的代码编辑器是一种用于直接在Web浏览器中编写代码的应用，无需在本地安装任何软件。 它提供了一个在线开发环境，开发人员可以在其中编写代码、预览效果、更改代码并与团队成员实时协作。基于Web的代码编辑器对于团队之间的协作非常重要， 有许多优势 ：可访问性：基于Web的代码编辑器可以从任何具有互联网连接的设备访问，使团队成员可以轻松地远程协同工作。这种可访问性具备更大的灵活性，并支持跨地区和跨时区的协作。实时团队协作：基于Web的代码编辑器通常支持实时协作功能，允许多个团队成员同时处理同一代码。开发人员能够在项目上进行协作，一起编辑和审查代码，并即时反馈。版本控制集成：与Git等版本控制系统集成，使团队能够管理和跟踪代码库的变更。通过两者集成，以提供集中的代码存储库，促进工作流的顺畅协作，从而简化协作。代码共享和审查：基于Web的代码编辑器提供了与团队成员共享代码片段或整个项目的简单方法。这简化了代码评审的过程，团队成员可以直接在编辑器中留下评论、提出更改建议、提供反馈。跨平台兼容性：基于Web的代码编辑器一般独立于平台，允许开发人员使用不同的操作系统（Windows、macOS、Linux）进行协作，而不会出现兼容性问题。具备较高包容性，不管团队成员的开发环境如何都能够为项目做贡献。本文主要推荐一些比较好的开源Web代码编辑器，以直接体验或嵌入到你的产品中。01 Monaco Editor https://github.com/microsoft/monaco-editorMonaco编辑器是微软开发的基于Web的代码编辑器，由VS Code提供功能支持。体验地址：https://microsoft.github.io/monaco-editor/playground.html优点：具有语法突出显示、代码完成和调试功能的丰富功能集。高度可定制和可扩展。性能出色，即使是大型代码库。支持多种编程语言。与其他工具和框架的集成。缺点：与更简单的代码编辑器相比，学习曲线更陡峭。由于其功能丰富的性质，需要更多的资源来运行。有限的离线功能，因为它主要在网络环境中运行。02 OpenVSCode Server https://github.com/gitpod-io/openvscode-server这个项目提供了一个可以在远处服务器上运行的VS Code，允许通过Web浏览器进行访问。它基于Gitpod和GitHub Codespaces 的技术架构 。VS Code团队对其架构进行重构，以支持基于浏览器的工作模式，并且该项目共享了使用最新版本的VS Code所需的最小更改集，具有简单的升级路径和低维护工作量。03 ecode https://github.com/SpartanJ/ecodeecode是为现代硬件设计的轻量级代码编辑器，专注于响应性和性能。它利用硬件加速的eepp GUI，并改进eepp GUI库。功能特征：轻巧便携极简的GUI，可定制的配色方案支持50多种语言的文本高亮显示和LSP语义高亮显示多光标支持，实现高效编辑终端集成，实现无缝命令执行用于快速访问编辑器功能的命令行自动完成和可定制的键盘绑定04 Code Server https://github.com/coder/code-server Code-Server是一个支持在浏览器中运行VS Code的开源项目，能够在任何设备上提供一致的开发环境。它还支持使用云服务器以获得更快的执行效率，并为移动的用户保留电池寿命。05 Tabby https://github.com/TabbyML/tabbyTabby是一个可以私有化部署的AI编码助手，提供了GitHub Copilot的开源和本地部署方案。它是独立的，不需要DBMS或云服务，具有易于集成的OpenAPI接口，并支持消费级GPU。另外，Tabby可以使用Docker轻松安装。06 Neko Code Editor https://github.com/flyingcatdeveloper/nceNeko Code Editor是一个简单的代码编辑器，具有Monaco Editor类似的功能，包括：控制台、在新选项卡中打开代码、多文件功能、项目管理、DevLog更新、本地数据保存、可自定义设置等功能。 功能特征：Monaco编辑器功能： 具有代码自动完成、 MDN 应 用 等功能。控制台：只需单击一个按钮即可轻松查看控制台。在新选项卡中打开代码：查看代码时，它看起来就像一个网页。多文件功能：拥有尽可能多的文件，支持HTML，CSS，文件夹和JS文件。仪表板：在一个位置查看所有编辑器，沿着显示上次打开它们的时间。项目导入：开始在新设备上工作或通过导入项目恢复已删除的数据。项目下载：安全下载整个项目，以防止意外数据丢失。保持更新：随时了解DevLog的新功能和修复。数据 备 份：数据使用localStorage和IndexedDB保存，可以轻松加载到项目。自定义设置：自定义编辑器的设置，包括编辑器名称、自动保存和文件压缩。07 CodeMirror https://github.com/codemirror/dev/https://codemirror.net/CodeMirror是一个可扩展的Web代码编辑器组件，可用于实现具有高级编辑功能和丰富编程接口的文本输入，并支持进行进一步扩展。功能特征：可访问性：适用于屏幕阅读器和键盘用户。移动的支持：在手机上使用平台的本地选择和编辑功能。双向文本：支持从右到左和从左到右的混合文本。高亮：颜色代码，以反映句法结构。显示行号：显示代码旁边带有行号或其他信息的间距。自动完成：在编辑器中提供特定语言的完成提示。代码折叠：暂时隐藏文档的某些部分。搜索/替换：特定于编辑器的搜索、regexp搜索和替换功能。完整解析：详细的解析树允许许多类型的语言集成。扩展接口：健壮地实现要求苛刻的编辑器扩展。模块化：大多数特性都是在通用公共API之上实现的。速度：即使在大型文档和长行上也能保持响应。自动关闭：在键入时自动插入匹配的括号。Linting：在编辑器中显示错误和警告消息。灵活的样式：混合字体样式和大小，在内容中添加小部件。主题化：导入或创建自定义可视化编辑器样式。协作编辑：允许多个用户编辑同一文档。历史记录 撤销 ：支持协作编辑的撤销、重做功能。多个选择：一次选择和编辑文档的多个范围。国际化：提供自定义文本以显示或通知用户。08 CodeFlask https://github.com/kazzkiq/CodeFlaskCodeFlask是一个轻量级、可定制的基于Web的代码编辑器。它提供了一些基础的代码编辑功能，如：语法突出显示、自动完成和代码格式化。CodeFlask的设计目标为易于使用，可以被轻松地集成到Web应用程序中。当需要一个简单和轻量级的代码编辑器时，它是一个合适的选择。09 CodeJar https://github.com/antonmedv/codejarCodeJar是一个强大的开源、可嵌入的Web代码编辑器。功能特征：轻量级（仅2.45 kB）没有依赖关系适用于Chrome，Safari，Firefox，iOS，iPadOS，Android.支持在新行上保留缩进自动添加右括号、引号使用Tab键缩进支持撤消、 重做可以使用任何高亮显示库， 如：PrismJS or 或 highlight.js 或自定义开发10 Rustpad https://github.com/ekzhang/rustpadRustpad是一个基于操作转换算法的高效和最小的开源协作文本编辑器。只需要一个小的Docker镜像，并且不需要数据库。服务器是使用Rust编写的warp web服务器框架，而前端是使用TypeScript编写的React和Monaco接口。编辑器通过WebSocket与服务器进行通信，性能高效，但在服务器重新启动或24小时不活动后可能断开连接，导致临时文档丢失。11 ICEcoder https://github.com/icecoder/ICEcoderICEcoder是一个基于浏览器的代码编辑器，允许高效的网站开发和维护。它可以在线或离线使用，并与Linux，Windows和Mac平台兼容。唯一的要求是PHP 7（推荐使用7.4）。但需要注意的是，目前这个开源库已经停止更新。原文出处：https://mp.weixin.qq.com/s/F_DaUkUnVDRNhCHqmgXWDQ

实战：一款实用炫酷的Linux系统Web管理平台 {mtitle title="院长简介"/}作者：院长职位：运维开发工程师官网：https://deanit.cn博客：https://blog.deanit.cn擅长：{callout color="#bfbfbf"}【虚拟化，容器化，自动化运维，CICD，监控，日志，中间件，双机热备，分布式存储，数据库，认证，组网隧道，Kali 安全渗透，网络攻击，负载均衡，Html，Css，Js，Jq，Vue3，Shell，Python，Go，前后端框架】{/callout}项目简介{callout color="#bfbfbf"}Webmin 是用于Linux / UNIX系统管理的开源Web控制面板。Webmin允许您管理用户，组，磁盘配额以及配置最受欢迎的服务，包括Web，FTP，电子邮件和数据库服务器。{/callout}项目官网https://webmin.com/项目GitHubhttps://github.com/webmin/webminWebmin特点易于使用 ：Webmin提供了直观的界面和友好的用户体验，使得系统管理员能够轻松地完成各种管理任务。支持多种操作系统 ：Webmin支持多种Linux发行版以及其他UNIX系统，如FreeBSD和Solaris等。全面的管理功能 ：Webmin集成了众多常见的服务器管理任务，包括系统配置、软件包管理、用户管理等。安全性高 ：Webmin具有访问控制和SSL支持，为远程管理提供了足够的安全性。可扩展性强 ：Webmin采用插件式结构，可以轻松地添加或删除功能模块，使其具有很强的扩展性和伸缩性。多语言支持 ：Webmin提供多国语言版本，包括中文，能够满足不同地区和语言习惯的用户需求。灵活的配置 ：Webmin的配置非常灵活，可以根据用户的需求进行定制，满足不同规模和服务器的管理需求。实时监控与日志分析 ：Webmin能够实时监控服务器的状态，提供实时的日志分析功能，帮助管理员及时发现并解决潜在问题。支持自动化任务 ：Webmin可以配置自动化任务，使得管理员能够定时执行特定的管理任务，提高管理效率。集成度高 ：Webmin可以与其他常见的服务器软件进行集成，如Apache、Nginx、MySQL等，方便管理员进行统一的管理和维护。{mtitle title="部署安装"/}设置repo源vim /etc/yum.repos.d/webmin.repo [Webmin] name=Webmin Distribution Neutral #baseurl=https://download.webmin.com/download/yum mirrorlist=https://download.webmin.com/download/yum/mirrorlist enabled=1下载Webmin GPG密钥[root@Dean ~]# wget http://www.webmin.com/jcameron-key.asc --no-check-certificate  --2024-01-21 18:23:41--  http://www.webmin.com/jcameron-key.asc 正在解析主机 www.webmin.com (www.webmin.com)... 216.105.38.11 ...... 长度：1320 (1.3K) [text/plain] 正在保存至: “jcameron-key.asc” jcameron-key.asc                           100%[=======================================================================================>]   1.29K  --.-KB/s  用时 0s       2024-01-21 18:23:44 (37.0 MB/s) - 已保存 “jcameron-key.asc” [1320/1320])导入Webmin GPG密钥[root@Dean ~]# rpm --import jcameron-key.asc重新生成缓存yum clean all yum makecahe安装webmin[root@Dean ~]# yum install webmin -y Webmin Distribution Neutral                                                                                                                3.6 MB/s |  20 MB     00:05     上次元数据过期检查：0:00:06 前，执行于 2024年01月21日 星期日 18时26分18秒。 依赖关系解决。 ============================================================================================================= 软件包                                         架构                               版本                                        仓库                                   大小 ============================================================================================================= 安装: webmin                                         noarch                             2.105-1                                     Webmin                                 39 M 安装依赖关系: perl-Digest-SHA                                x86_64                             1:6.02-1.el8                                appstream                              65 k ...... perl-Time-Piece                                x86_64                             1.31-422.el8                                appstream                              97 k 事务概要 ============================================================================================================= 安装  8 软件包 总下载：40 M 安装大小：116 M 下载软件包： (1/8): perl-Filter-1.58-2.el8.x86_64.rpm                                                                                                   463 kB/s |  81 kB     00:00     .....  (8/8): webmin-2.105-1.noarch.rpm                                                                                                            31 kB/s |  39 MB     21:46     ------------------------------------------------------------------------------------------------------------- 总计                                                                                                                                        31 kB/s |  40 MB     21:47      运行事务检查 事务检查成功。 运行事务测试 事务测试成功。 运行事务 准备中  :                                                                                                                                                            1/1  安装    : perl-Time-Piece-1.31-422.el8.x86_64 ...... 8/8  已更新安装的产品。 已安装: perl-Digest-SHA-1:6.02-1.el8.x86_64 ...... webmin-2.105-1.noarch                       完毕！ 启动服务[root@Dean ~]# systemctl enable webmin --now [root@Dean ~]# systemctl status webmin ● webmin.service - Webmin server daemon Loaded: loaded (/usr/lib/systemd/system/webmin.service; enabled; vendor preset: disabled) Active: active (running) since Sun 2024-01-21 18:48:22 CST; 1min 11s ago Main PID: 1707031 (miniserv.pl) Tasks: 1 (limit: 201230) Memory: 32.1M CGroup: /system.slice/webmin.service └─1707031 /usr/bin/perl /usr/libexec/webmin/miniserv.pl /etc/webmin/miniserv.conf 1月 21 18:48:22 Dean systemd[1]: Starting Webmin server daemon... 1月 21 18:48:22 Dean systemd[1]: Started Webmin server daemon.Web访问https://ip:10000账号密码，是你的主机的SSH的账号密码登录成功设置中文性能查看功能如下：特色功能：原文转载：https://mp.weixin.qq.com/s/NBtvsa9c7FTT6FsCHxMtKQ

JS之给元素添加类的方法 原生js中添加类的方法//1.为 <div> 元素添加一个类: document.getElementById("div").classList.add("类名"); //2.为 <div> 元素添加多个类: document.getElementById("div").classList.add("类名1","类名2","类名3",...); //3.为 <div> 元素移除一个类: document.getElementById("div").classList.remove("类名"); //4.为 <div> 元素移除多个类: document.getElementById("div").classList.remove("类名1","类名2","类名3",...); .jquery中添加类的方法//1.为 <div> 元素添加一个类: $("#div").addClass("类名"); //2.为 <div> 元素添加多个类: //只需要通过空格来间隔 class 值即可一次性添加多个 class $("#div").addClass("类名1 类名2 类名3"); //3.为 <div> 元素移除一个类: $("#div").removeClass("类名"); //4.为 <div> 元素移除多个类: //只需要通过空格来间隔 class 值即可一次性清除掉多个 class $("#div").removeClass("类名1 类名2 类名3"); 检查是否含有某个类的方法//检查是否含有某个CSS类 div.classList.contains('类名'); //return true or false