CSS选择器世界

阅读原文时间：2023年07月16日阅读：1

CSS选择器世界

CSS选择器的分类与优先级

css选择器分为四类：选择器、选择符（后代关系的空格、>、+、~、||）、伪类、伪元素（::before、::after、::first-letter等）。

css的优先级:
css的优先级有很多划分方法，所有的方法其实都大同小异。这里将CSS优先级划分为6个等级：

0级：通配选择器（*）、选择符（+、>、~、空格、||）、逻辑组合伪类(:not()、:is()等)
1级：标签选择器
2级：类选择器、属性选择器、伪类
3级：ID选择器
4级：style内联属性
5级：!important

CSS优先级的计算规则：0级选择器优先级数值+0，1级选择器+1，2级选择器+10，三级选择器+100

#foo&nbsp;a:not([ref=nofollow]){}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;优先级数值：100+1+0+10&nbsp;=&nbsp;111

tips1:增加CSS优先级的小技巧
重复自身选择器，如以下选择器即提高了优先级，又不会增加耦合：
.foo.foo
或者如下写法：
.foo[class] 、 #foo[id]
tips2: 实现类似:first-child的效果
有如下场景，我们希望列表除了第一个第一个以外其他的都有margin-top,一般我们会这样写：

1：.cs:not(:first-child){margin-top:1em;}2：.cs{margin-top:1em};.cs:first-child{margin-top:0}

下面我们利用兄弟选择器：

.cs+.cs{margin-top:&nbsp;1em}

tips3：实现前面兄弟选择符的效果
如下场景：输入框聚焦时，前面文字高亮显示
1：flex布局；
2：float浮动；
3：absolute绝对定位；
4：direction属性实现，代码如下：

<div&nbsp;class="cs-direction">&nbsp;&nbsp;<input&nbsp;class="cs-input"><label&nbsp;class="cs-label">用户名：</label></div>

.cs-direction{&nbsp;&nbsp;direction:&nbsp;rtl}.cs-direction&nbsp;.cs-input,.cs-direction&nbsp;.cs-label{&nbsp;&nbsp;direction:&nbsp;ltr;}.cs-label{&nbsp;&nbsp;display:inline-block;}:focus&nbsp;+&nbsp;.cs-label{&nbsp;color:&nbsp;darkblue;&nbsp;text-shadow:&nbsp;0&nbsp;0&nbsp;1px;}

注意：使用direction属性时，针对的必须为内联元素，因此，对于块级元素需进行转化为内联

属性选择器

[attr]
[attr = ''val']
[attr ~= 'val']
[attr ^= 'val']
[attr $= 'val']
[attr *= 'val']

用户行为伪类

1：手型经过伪类:hover（支持所有HTML元素）

一个简单的应用场景：当鼠标经过a标签时，'显示' 文字显示,因为:hover是即时的，所以通过transition对visibility进行过渡（trantion对display不起作用）起到时延作用。

&nbsp;&nbsp;<a&nbsp;href&nbsp;class="icon-delete"&nbsp;data-title="显示">删除</a>

.icon-delete{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;20px;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;&nbsp;&nbsp;}&nbsp;&nbsp;.icon-delete::before{&nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;attr(data-title);&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;&nbsp;&nbsp;bottom:&nbsp;30px;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0;&nbsp;&nbsp;}&nbsp;&nbsp;.icon-delete::before,&nbsp;&nbsp;.icon-delete::after&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;transition:&nbsp;visibility&nbsp;0s&nbsp;0.2s;&nbsp;&nbsp;&nbsp;&nbsp;visibility:&nbsp;hidden;&nbsp;&nbsp;}&nbsp;&nbsp;.icon-delete:hover::before,&nbsp;&nbsp;.icon-delete:hover::after&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;visibility:&nbsp;visible;&nbsp;&nbsp;}

纯hover显示浮层的体验问题：纯hover显示浮层确实很方便，但是如果鼠标坏了，或者是触屏设备通过Tab来切换，如果是一个下拉列表，那么久完全瘫痪了，我们可以通过增加:focus来优化css，上述代码可以优化为：

<a&nbsp;href&nbsp;class="icon-delete"&nbsp;data-title="删除">删除</a>

&nbsp;.icon-delete{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;20px;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;&nbsp;&nbsp;}&nbsp;&nbsp;.icon-delete::before{&nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;attr(data-title);&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;&nbsp;&nbsp;bottom:&nbsp;30px;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0;&nbsp;&nbsp;}&nbsp;&nbsp;.icon-delete::before,&nbsp;&nbsp;.icon-delete::after&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;transition:&nbsp;visibility&nbsp;0s&nbsp;0.2s;&nbsp;&nbsp;&nbsp;&nbsp;visibility:&nbsp;hidden;&nbsp;&nbsp;}&nbsp;&nbsp;.icon-delete:hover::before,&nbsp;&nbsp;.icon-delete:hover::after&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;visibility:&nbsp;visible;&nbsp;&nbsp;}.icon-delete:focus::before,.icon-delete:focus::after&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;visibility:&nbsp;visible;&nbsp;&nbsp;&nbsp;&nbsp;transition:&nbsp;none;}

但是，上述并没有解决所有的问题，如果浮层的内部有链接或者按钮的话，使用:focus浮层内的连接或者按钮是无法被点击的，因为Tab在切换焦点元素的时候，浮层会失焦而迅速隐藏。这时需要另外一个伪类:focus-within来解决,详细我们在下面讨论。

2:激活伪类:active
:active可以用于设置元素激活状态的样式，可通过点击鼠标主键，也可以通过手指或者触控笔点击触摸屏触发激活状态。具体表现为点击按下触发，点击抬起取消。:active支持所有HTML元素

:active的不足之处：

IE浏览器下，:active无法冒泡。即当一个元素与父级都设置:active样式时，点击子元素，父元素的:active不会被触发
IE浏览器，html、body用:active设置背景后，背景色无法还原；
移动端safari浏览器下，:active伪类默认无效

按钮的通用:active样式技巧(主要应用移动端)
在桌面端可以通过:hover来反馈状态变化，移动端只能通过:active来反馈，移动端有很多需求点击反馈链接跟按钮，有如下通用技巧：

使用box-shadow(兼容IE9，该方法对非对称闭合标签无效)

[href]:active,button:active{ box-shadow: 0 0 0 999px rgba(0,0,0,.05); }
使用linear-gradient线性渐变(兼容IE10以上)

[href]:active,button:active,[type=reset]:active,[type=button]:active,[type=submit]:active{ background-image: linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05));}

3:焦点伪类:focus(支持IE8+)
:focus只能匹配特定的元素，包括：

非disabled状态的表单元素；
包含href的元素

、

那么如何让普通的元素也可以用:focus伪类呢？
设置HTML tabindex属性，如下写法：

&nbsp;<div&nbsp;tabindex='-1'>内容</div>&nbsp;<div&nbsp;tabindex='0'>内容</div>&nbsp;<div&nbsp;tabindex='1'>内容</div>

如果期望

元素被Tab索引，且被点击的时候触发:focus伪类样式，设置tabindex='0';如果期望不希望被索引，只在点击的时候触发:focus，则设置为-1。
如下，实现点击一个图标显示大图的交互：

<span&nbsp;class="cs-small"&nbsp;tabindex='0'></span><span&nbsp;class="cs-big"></span>

.cs-small{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;10px;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;10px;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;green;&nbsp;&nbsp;};&nbsp;&nbsp;.cs-big{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;50px;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;50px;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;green;&nbsp;&nbsp;&nbsp;&nbsp;margin-left:&nbsp;10px;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none;&nbsp;&nbsp;};&nbsp;&nbsp;:focus&nbsp;+&nbsp;.cs-big{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;}

实际上，使用tabindex也并不是那么完美，在ios safari浏览器下，元素处于focus状态后，除非有其他可聚焦的元素转移焦点，否则会一直保持聚焦状态。解决方法只需要再套个父盒子，设置tabindex=‘-1’，同时该复盒子需要取消outline样式（outline：0 none;）

4:整体焦点伪类:focus-within(移动端以及非IE浏览器)

：focus-within功能通:focus类似，但是:focus是对当前元素而言，:focus-within在当前元素或者当前元素的子元素处于聚焦状态都会匹配。
例：:focus-within 实现无障碍访问的下拉列表，解决上面:focus在浮层里也有链接无法Tab切换的问题：

<div&nbsp;class="cs-bar">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cs-details">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href='javascript:void(0)'&nbsp;class="cs-summary">我的消息</a&nbsp;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="cs-datalist">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href&nbsp;class="cs-datalist-a">我的回答<sup&nbsp;class="cs-datalist-sup">12</sup>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a&nbsp;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href&nbsp;class="cs-datalist-a">我的私信</a&nbsp;>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

cs-bar&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#e3e4e5;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#888;&nbsp;&nbsp;&nbsp;&nbsp;padding-left:&nbsp;40px;&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom:&nbsp;200px;&nbsp;&nbsp;}&nbsp;&nbsp;.cs-details&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;&nbsp;&nbsp;text-align:&nbsp;left;&nbsp;&nbsp;}&nbsp;&nbsp;.cs-summary&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;5px&nbsp;28px;&nbsp;&nbsp;&nbsp;&nbsp;text-indent:&nbsp;-15px;&nbsp;&nbsp;&nbsp;&nbsp;user-select:&nbsp;none;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;&nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;1;&nbsp;&nbsp;}

&nbsp;&nbsp;.cs-datalist&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;&nbsp;&nbsp;min-width:&nbsp;100px;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;#ddd;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#fff;&nbsp;&nbsp;&nbsp;&nbsp;margin-top:&nbsp;-1px;&nbsp;&nbsp;}

&nbsp;&nbsp;.cs-datalist-a&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;5px&nbsp;10px;&nbsp;&nbsp;&nbsp;&nbsp;transition:&nbsp;background-color&nbsp;0.2s,&nbsp;color&nbsp;0.2s;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;inherit;&nbsp;&nbsp;}&nbsp;&nbsp;.cs-datalist-a:hover&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#f5f5f5;&nbsp;&nbsp;}&nbsp;&nbsp;.cs-datalist-a:active&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#f0f0f0;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#555;&nbsp;&nbsp;}&nbsp;&nbsp;.cs-datalist-sup&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#cd0000;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;12px;&nbsp;&nbsp;&nbsp;&nbsp;margin-top:&nbsp;-0.25em;&nbsp;&nbsp;&nbsp;&nbsp;margin-left:&nbsp;2px;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;.cs-details:focus-within&nbsp;.cs-summary,&nbsp;&nbsp;&nbsp;.cs-summary:hover&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#fff;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;.cs-details:focus-within&nbsp;.cs-datalist&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block;&nbsp;&nbsp;&nbsp;}

URL定位伪类

:link伪类（基本被a标签取代，不做讨论）

:visited伪类（怪癖最多的CSS伪类）

1：支持:visited的CSS属性有限
目前仅支持以下CSS： color、background-color、border-color、border-bottom-color、border-top-color、border-left-color、border-right-color、column-rule-color、outline-color。类似::before跟::after也不支持。
例：实现访问过的连接文字后面加上一个visited的字样

文字

small{ color: white; } small:after{ content: 'visited'; } a:visited small{ color: lightskyblue; }
2:没有半透明，该伪类控制颜色时，加透明度无效
3：只能重置，不能凭空设置
如下：

a{ color: blue;}a:visited{ color: red; background-color: gray;}

以上代码设置只会使color生效。

4:无法获取:visited设置和呈现的色值
该伪类设置的色值，用js的getComputedStyle()无法获取。

:any-link伪类（IE9+）
两大特性：
1.匹配所有设置了href的连接元素，包括、、
2.匹配所有匹配:link伪类或者:visited伪类的元素（:link只匹配没有访问过的连接）
目标伪类:target
URL锚点可以跟页面中元素的id匹配进行锚定，例：

<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p&nbsp;id='cs-first'>第一行,id:cs-first</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p&nbsp;id='cs-second'>第二行,id:cs-second</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p&nbsp;id='cs-last'>第三行,id:cs-last</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

p:target{&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;bold;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;skyblue;&nbsp;&nbsp;}

通过链接的hash值就可以匹配到对应的元素

树结构伪类

:root伪类
在html中:root等同于html元素；
:empty伪类

:empty用来匹配空标签元素
:empty伪类可以匹配前后闭合的替换元素（button、textarea等）；
:empty伪类匹配非闭合的元素（input、img等）

若元素有注释或者空格、换行等都是不能匹配到的
::before、::after都可以插入内容，但是不会影响：empty的匹配

:empty的实际应用

隐藏空元素。
比如像一个动态列表有内容的时候可能会加margin、padding等布局，但是没有内容的时候就会空出一大块，这时候就可以用:empty伪类在匹配到空的时候隐藏掉。
字段缺失只能提示
如在一个动态详情列表中，如果对应的字段没有内容，则在后面显示 '暂无'的字样，代码如下：



姓名：
张三


年龄：


身高：
178cm


  dt,dd{    display: inline-block;  }  dd:empty:before{    content: '暂无';  }

子索引伪类

:first-child、:last-child

:only-child

:nth-child()伪类和:nth-last-child()伪类

适用于动态匹配场景，可以匹配制定索引序号的元素。参数可以是关键字（odd/even）,也可以是函数符号。
函数符号形式如下：

An+B: A、B必须为整数，n前面可以有负数，n为从1开始的自然序列（0，1，2…..），第一个子元素匹配序号为1.
一些示例：

tr:nth-child(odd),匹配1、3、5…..行；
tr:nth-child(even),匹配2、4、6…..；
li:nth-child(1),匹配第一个；
li:nth-child(n+4):nth-child(-n+10): 匹配4-10个li

:first-of-type伪类和:last-of-type伪类

表示当前标签类型元素第一个和最后一个

:only-of-type

:nth-of-type()伪类和:nth-last-of-type伪类

:nth-of-type与:nth-child的不同之处：:nth-of-type匹配的是所有相同标签的兄弟元素，而另一个无视标签类型。

<div>&nbsp;&nbsp;<h3>标题一</h3>&nbsp;&nbsp;<p>段落一</p>&nbsp;&nbsp;<p>段落二</p>&nbsp;&nbsp;<h3>标题二</h3>&nbsp;&nbsp;<p>段落三</p>&nbsp;&nbsp;<p>段落四</p></div>

&nbsp;&nbsp;p:nth-child(2n+1){&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;red;&nbsp;&nbsp;}&nbsp;&nbsp;p:nth-child(4n){&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;darkblue;&nbsp;&nbsp;}&nbsp;&nbsp;p:nth-of-type(2n+1){&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;skyblue;&nbsp;&nbsp;}

图中，第2、5行为浅蓝色，第三行为红色。

逻辑组合伪类

否定伪类:not()
:not()主要的应用场景为重置CSS
例：input:not(:disabled):not(:read-only)()
表示匹配所有不处于禁用，也不是只读状态的input

例：列表一行5个，每个都向右有空隙，每一行的最后一个没有空隙；

&nbsp;li:not(:nth-of-type(5n+1)){&nbsp;&nbsp;&nbsp;margin-right:&nbsp;10px;&nbsp;}

任意匹配伪类:is()
例：

&nbsp;&nbsp;.cs-a&nbsp;img,.cs-b&nbsp;img,.cs-c&nbsp;img,.cs-d&nbsp;img{&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;skyblue;&nbsp;&nbsp;}&nbsp;&nbsp;可以简化为如下：

&nbsp;&nbsp;:is(.cs-a,.cs-b,.cs-c,.cs-d)&nbsp;img{&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;skyblue;&nbsp;&nbsp;}

:where()、:has()

输入伪类

输入控件状态:

可用状态与禁用状态伪类 :enabled和:disabled (IE9+)

对于表单元素来说，:enable跟:disabled是完全对立的。但是有一个例外元素，在chrome浏览器下，带href的a元素是可以匹配:enabled伪类的，但是却无法匹配:disabled伪类，其他浏览器也有各种各样的问题，不展开讨论。

设置tabindex属性的元素不能匹配:enabled伪类；

元素设置visibility:hidden跟display:none的能够匹配:enabled伪类跟:disabled伪类。

读写特性伪类:read-only和:read-write

readonly与disabled的区别：
设置readonly的输入框不能输入内容，但是可以被表单提交；
设置disabled的输入框不能输入内容美也不能被表单提交。

占位符显示伪类:placeholder-shown（除IE）

表示当输入框的placeholder内容显示的时候，匹配输入框
由于其只在内容为空值状态的时候才显示，所以我们可以借助placeholder-shown伪类来判断一个输入框是否有值。
例：输入框没有值得时候显示空值提示

input:placeholder-shown&nbsp;+&nbsp;small:before{&nbsp;&nbsp;content:&nbsp;'尚未输入验证码';&nbsp;&nbsp;color:&nbsp;red;}

默认选项伪类default

输入值状态:

选中选项伪类:checked

:checked与[checked]的比较：

:checked只能匹配标准的表单控件元素，[checked]可以与任意元素匹配；
[checked]是非实时的，因此不建议用此属性选择器；
伪类可以从祖先元素继承；

不确定值伪类:indeterminate

输入值验证:

有效验证伪类:valid和:invalid

范围验证伪类:in-range和:out-of-range

可选性伪类:required和:optional

参考资料：

.katex { display: block; text-align: center; white-space: nowrap; }
.katex-display > .katex > .katex-html { display: block; }
.katex-display > .katex > .katex-html > .tag { position: absolute; right: 0px; }
.katex { font: 1.21em/1.2 KaTeX_Main, "Times New Roman", serif; text-indent: 0px; text-rendering: auto; }
.katex * { }
.katex .katex-mathml { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0px; border: 0px; height: 1px; width: 1px; overflow: hidden; }
.katex .katex-html { }
.katex .katex-html > .newline { display: block; }
.katex .base { position: relative; display: inline-block; white-space: nowrap; width: min-content; }
.katex .strut { display: inline-block; }
.katex .textbf { font-weight: bold; }
.katex .textit { font-style: italic; }
.katex .textrm { font-family: KaTeX_Main; }
.katex .textsf { font-family: KaTeX_SansSerif; }
.katex .texttt { font-family: KaTeX_Typewriter; }
.katex .mathit { font-family: KaTeX_Math; font-style: italic; }
.katex .mathrm { font-style: normal; }
.katex .mathbf { font-family: KaTeX_Main; font-weight: bold; }
.katex .boldsymbol { font-family: KaTeX_Math; font-weight: bold; font-style: italic; }
.katex .amsrm { font-family: KaTeX_AMS; }
.katex .mathbb, .katex .textbb { font-family: KaTeX_AMS; }
.katex .mathcal { font-family: KaTeX_Caligraphic; }
.katex .mathfrak, .katex .textfrak { font-family: KaTeX_Fraktur; }
.katex .mathtt { font-family: KaTeX_Typewriter; }
.katex .mathscr, .katex .textscr { font-family: KaTeX_Script; }
.katex .mathsf, .katex .textsf { font-family: KaTeX_SansSerif; }
.katex .mainit { font-family: KaTeX_Main; font-style: italic; }
.katex .mainrm { font-family: KaTeX_Main; font-style: normal; }
.katex .vlist-t { display: inline-table; table-layout: fixed; }
.katex .vlist-r { display: table-row; }
.katex .vlist { display: table-cell; vertical-align: bottom; position: relative; }
.katex .vlist > span { display: block; height: 0px; position: relative; }
.katex .vlist > span > span { display: inline-block; }
.katex .vlist > span > .pstrut { overflow: hidden; width: 0px; }
.katex .vlist-t2 { margin-right: -2px; }
.katex .vlist-s { display: table-cell; vertical-align: bottom; font-size: 1px; width: 2px; min-width: 2px; }
.katex .msupsub { text-align: left; }
.katex .mfrac > span > span { text-align: center; }
.katex .mfrac .frac-line { display: inline-block; width: 100%; border-bottom-style: solid; }
.katex .mspace { display: inline-block; }
.katex .llap, .katex .rlap, .katex .clap { width: 0px; position: relative; }
.katex .llap > .inner, .katex .rlap > .inner, .katex .clap > .inner { position: absolute; }
.katex .llap > .fix, .katex .rlap > .fix, .katex .clap > .fix { display: inline-block; }
.katex .llap > .inner { right: 0px; }
.katex .rlap > .inner, .katex .clap > .inner { left: 0px; }
.katex .clap > .inner > span { margin-left: -50%; margin-right: 50%; }
.katex .rule { display: inline-block; border: 0px solid; position: relative; }
.katex .overline .overline-line, .katex .underline .underline-line, .katex .hline { display: inline-block; width: 100%; border-bottom-style: solid; }
.katex .hdashline { display: inline-block; width: 100%; border-bottom-style: dashed; }
.katex .sqrt > .root { margin-left: 0.277778em; margin-right: -0.555556em; }
.katex .sizing, .katex .fontsize-ensurer { display: inline-block; }
.katex .sizing.reset-size1.size1, .katex .fontsize-ensurer.reset-size1.size1 { font-size: 1em; }
.katex .sizing.reset-size1.size2, .katex .fontsize-ensurer.reset-size1.size2 { font-size: 1.2em; }
.katex .sizing.reset-size1.size3, .katex .fontsize-ensurer.reset-size1.size3 { font-size: 1.4em; }
.katex .sizing.reset-size1.size4, .katex .fontsize-ensurer.reset-size1.size4 { font-size: 1.6em; }
.katex .sizing.reset-size1.size5, .katex .fontsize-ensurer.reset-size1.size5 { font-size: 1.8em; }
.katex .sizing.reset-size1.size6, .katex .fontsize-ensurer.reset-size1.size6 { font-size: 2em; }
.katex .sizing.reset-size1.size7, .katex .fontsize-ensurer.reset-size1.size7 { font-size: 2.4em; }
.katex .sizing.reset-size1.size8, .katex .fontsize-ensurer.reset-size1.size8 { font-size: 2.88em; }
.katex .sizing.reset-size1.size9, .katex .fontsize-ensurer.reset-size1.size9 { font-size: 3.456em; }
.katex .sizing.reset-size1.size10, .katex .fontsize-ensurer.reset-size1.size10 { font-size: 4.148em; }
.katex .sizing.reset-size1.size11, .katex .fontsize-ensurer.reset-size1.size11 { font-size: 4.976em; }
.katex .sizing.reset-size2.size1, .katex .fontsize-ensurer.reset-size2.size1 { font-size: 0.833333em; }
.katex .sizing.reset-size2.size2, .katex .fontsize-ensurer.reset-size2.size2 { font-size: 1em; }
.katex .sizing.reset-size2.size3, .katex .fontsize-ensurer.reset-size2.size3 { font-size: 1.16667em; }
.katex .sizing.reset-size2.size4, .katex .fontsize-ensurer.reset-size2.size4 { font-size: 1.33333em; }
.katex .sizing.reset-size2.size5, .katex .fontsize-ensurer.reset-size2.size5 { font-size: 1.5em; }
.katex .sizing.reset-size2.size6, .katex .fontsize-ensurer.reset-size2.size6 { font-size: 1.66667em; }
.katex .sizing.reset-size2.size7, .katex .fontsize-ensurer.reset-size2.size7 { font-size: 2em; }
.katex .sizing.reset-size2.size8, .katex .fontsize-ensurer.reset-size2.size8 { font-size: 2.4em; }
.katex .sizing.reset-size2.size9, .katex .fontsize-ensurer.reset-size2.size9 { font-size: 2.88em; }
.katex .sizing.reset-size2.size10, .katex .fontsize-ensurer.reset-size2.size10 { font-size: 3.45667em; }
.katex .sizing.reset-size2.size11, .katex .fontsize-ensurer.reset-size2.size11 { font-size: 4.14667em; }
.katex .sizing.reset-size3.size1, .katex .fontsize-ensurer.reset-size3.size1 { font-size: 0.714286em; }
.katex .sizing.reset-size3.size2, .katex .fontsize-ensurer.reset-size3.size2 { font-size: 0.857143em; }
.katex .sizing.reset-size3.size3, .katex .fontsize-ensurer.reset-size3.size3 { font-size: 1em; }
.katex .sizing.reset-size3.size4, .katex .fontsize-ensurer.reset-size3.size4 { font-size: 1.14286em; }
.katex .sizing.reset-size3.size5, .katex .fontsize-ensurer.reset-size3.size5 { font-size: 1.28571em; }
.katex .sizing.reset-size3.size6, .katex .fontsize-ensurer.reset-size3.size6 { font-size: 1.42857em; }
.katex .sizing.reset-size3.size7, .katex .fontsize-ensurer.reset-size3.size7 { font-size: 1.71429em; }
.katex .sizing.reset-size3.size8, .katex .fontsize-ensurer.reset-size3.size8 { font-size: 2.05714em; }
.katex .sizing.reset-size3.size9, .katex .fontsize-ensurer.reset-size3.size9 { font-size: 2.46857em; }
.katex .sizing.reset-size3.size10, .katex .fontsize-ensurer.reset-size3.size10 { font-size: 2.96286em; }
.katex .sizing.reset-size3.size11, .katex .fontsize-ensurer.reset-size3.size11 { font-size: 3.55429em; }
.katex .sizing.reset-size4.size1, .katex .fontsize-ensurer.reset-size4.size1 { font-size: 0.625em; }
.katex .sizing.reset-size4.size2, .katex .fontsize-ensurer.reset-size4.size2 { font-size: 0.75em; }
.katex .sizing.reset-size4.size3, .katex .fontsize-ensurer.reset-size4.size3 { font-size: 0.875em; }
.katex .sizing.reset-size4.size4, .katex .fontsize-ensurer.reset-size4.size4 { font-size: 1em; }
.katex .sizing.reset-size4.size5, .katex .fontsize-ensurer.reset-size4.size5 { font-size: 1.125em; }
.katex .sizing.reset-size4.size6, .katex .fontsize-ensurer.reset-size4.size6 { font-size: 1.25em; }
.katex .sizing.reset-size4.size7, .katex .fontsize-ensurer.reset-size4.size7 { font-size: 1.5em; }
.katex .sizing.reset-size4.size8, .katex .fontsize-ensurer.reset-size4.size8 { font-size: 1.8em; }
.katex .sizing.reset-size4.size9, .katex .fontsize-ensurer.reset-size4.size9 { font-size: 2.16em; }
.katex .sizing.reset-size4.size10, .katex .fontsize-ensurer.reset-size4.size10 { font-size: 2.5925em; }
.katex .sizing.reset-size4.size11, .katex .fontsize-ensurer.reset-size4.size11 { font-size: 3.11em; }
.katex .sizing.reset-size5.size1, .katex .fontsize-ensurer.reset-size5.size1 { font-size: 0.555556em; }
.katex .sizing.reset-size5.size2, .katex .fontsize-ensurer.reset-size5.size2 { font-size: 0.666667em; }
.katex .sizing.reset-size5.size3, .katex .fontsize-ensurer.reset-size5.size3 { font-size: 0.777778em; }
.katex .sizing.reset-size5.size4, .katex .fontsize-ensurer.reset-size5.size4 { font-size: 0.888889em; }
.katex .sizing.reset-size5.size5, .katex .fontsize-ensurer.reset-size5.size5 { font-size: 1em; }
.katex .sizing.reset-size5.size6, .katex .fontsize-ensurer.reset-size5.size6 { font-size: 1.11111em; }
.katex .sizing.reset-size5.size7, .katex .fontsize-ensurer.reset-size5.size7 { font-size: 1.33333em; }
.katex .sizing.reset-size5.size8, .katex .fontsize-ensurer.reset-size5.size8 { font-size: 1.6em; }
.katex .sizing.reset-size5.size9, .katex .fontsize-ensurer.reset-size5.size9 { font-size: 1.92em; }
.katex .sizing.reset-size5.size10, .katex .fontsize-ensurer.reset-size5.size10 { font-size: 2.30444em; }
.katex .sizing.reset-size5.size11, .katex .fontsize-ensurer.reset-size5.size11 { font-size: 2.76444em; }
.katex .sizing.reset-size6.size1, .katex .fontsize-ensurer.reset-size6.size1 { font-size: 0.5em; }
.katex .sizing.reset-size6.size2, .katex .fontsize-ensurer.reset-size6.size2 { font-size: 0.6em; }
.katex .sizing.reset-size6.size3, .katex .fontsize-ensurer.reset-size6.size3 { font-size: 0.7em; }
.katex .sizing.reset-size6.size4, .katex .fontsize-ensurer.reset-size6.size4 { font-size: 0.8em; }
.katex .sizing.reset-size6.size5, .katex .fontsize-ensurer.reset-size6.size5 { font-size: 0.9em; }
.katex .sizing.reset-size6.size6, .katex .fontsize-ensurer.reset-size6.size6 { font-size: 1em; }
.katex .sizing.reset-size6.size7, .katex .fontsize-ensurer.reset-size6.size7 { font-size: 1.2em; }
.katex .sizing.reset-size6.size8, .katex .fontsize-ensurer.reset-size6.size8 { font-size: 1.44em; }
.katex .sizing.reset-size6.size9, .katex .fontsize-ensurer.reset-size6.size9 { font-size: 1.728em; }
.katex .sizing.reset-size6.size10, .katex .fontsize-ensurer.reset-size6.size10 { font-size: 2.074em; }
.katex .sizing.reset-size6.size11, .katex .fontsize-ensurer.reset-size6.size11 { font-size: 2.488em; }
.katex .sizing.reset-size7.size1, .katex .fontsize-ensurer.reset-size7.size1 { font-size: 0.416667em; }
.katex .sizing.reset-size7.size2, .katex .fontsize-ensurer.reset-size7.size2 { font-size: 0.5em; }
.katex .sizing.reset-size7.size3, .katex .fontsize-ensurer.reset-size7.size3 { font-size: 0.583333em; }
.katex .sizing.reset-size7.size4, .katex .fontsize-ensurer.reset-size7.size4 { font-size: 0.666667em; }
.katex .sizing.reset-size7.size5, .katex .fontsize-ensurer.reset-size7.size5 { font-size: 0.75em; }
.katex .sizing.reset-size7.size6, .katex .fontsize-ensurer.reset-size7.size6 { font-size: 0.833333em; }
.katex .sizing.reset-size7.size7, .katex .fontsize-ensurer.reset-size7.size7 { font-size: 1em; }
.katex .sizing.reset-size7.size8, .katex .fontsize-ensurer.reset-size7.size8 { font-size: 1.2em; }
.katex .sizing.reset-size7.size9, .katex .fontsize-ensurer.reset-size7.size9 { font-size: 1.44em; }
.katex .sizing.reset-size7.size10, .katex .fontsize-ensurer.reset-size7.size10 { font-size: 1.72833em; }
.katex .sizing.reset-size7.size11, .katex .fontsize-ensurer.reset-size7.size11 { font-size: 2.07333em; }
.katex .sizing.reset-size8.size1, .katex .fontsize-ensurer.reset-size8.size1 { font-size: 0.347222em; }
.katex .sizing.reset-size8.size2, .katex .fontsize-ensurer.reset-size8.size2 { font-size: 0.416667em; }
.katex .sizing.reset-size8.size3, .katex .fontsize-ensurer.reset-size8.size3 { font-size: 0.486111em; }
.katex .sizing.reset-size8.size4, .katex .fontsize-ensurer.reset-size8.size4 { font-size: 0.555556em; }
.katex .sizing.reset-size8.size5, .katex .fontsize-ensurer.reset-size8.size5 { font-size: 0.625em; }
.katex .sizing.reset-size8.size6, .katex .fontsize-ensurer.reset-size8.size6 { font-size: 0.694444em; }
.katex .sizing.reset-size8.size7, .katex .fontsize-ensurer.reset-size8.size7 { font-size: 0.833333em; }
.katex .sizing.reset-size8.size8, .katex .fontsize-ensurer.reset-size8.size8 { font-size: 1em; }
.katex .sizing.reset-size8.size9, .katex .fontsize-ensurer.reset-size8.size9 { font-size: 1.2em; }
.katex .sizing.reset-size8.size10, .katex .fontsize-ensurer.reset-size8.size10 { font-size: 1.44028em; }
.katex .sizing.reset-size8.size11, .katex .fontsize-ensurer.reset-size8.size11 { font-size: 1.72778em; }
.katex .sizing.reset-size9.size1, .katex .fontsize-ensurer.reset-size9.size1 { font-size: 0.289352em; }
.katex .sizing.reset-size9.size2, .katex .fontsize-ensurer.reset-size9.size2 { font-size: 0.347222em; }
.katex .sizing.reset-size9.size3, .katex .fontsize-ensurer.reset-size9.size3 { font-size: 0.405093em; }
.katex .sizing.reset-size9.size4, .katex .fontsize-ensurer.reset-size9.size4 { font-size: 0.462963em; }
.katex .sizing.reset-size9.size5, .katex .fontsize-ensurer.reset-size9.size5 { font-size: 0.520833em; }
.katex .sizing.reset-size9.size6, .katex .fontsize-ensurer.reset-size9.size6 { font-size: 0.578704em; }
.katex .sizing.reset-size9.size7, .katex .fontsize-ensurer.reset-size9.size7 { font-size: 0.694444em; }
.katex .sizing.reset-size9.size8, .katex .fontsize-ensurer.reset-size9.size8 { font-size: 0.833333em; }
.katex .sizing.reset-size9.size9, .katex .fontsize-ensurer.reset-size9.size9 { font-size: 1em; }
.katex .sizing.reset-size9.size10, .katex .fontsize-ensurer.reset-size9.size10 { font-size: 1.20023em; }
.katex .sizing.reset-size9.size11, .katex .fontsize-ensurer.reset-size9.size11 { font-size: 1.43981em; }
.katex .sizing.reset-size10.size1, .katex .fontsize-ensurer.reset-size10.size1 { font-size: 0.24108em; }
.katex .sizing.reset-size10.size2, .katex .fontsize-ensurer.reset-size10.size2 { font-size: 0.289296em; }
.katex .sizing.reset-size10.size3, .katex .fontsize-ensurer.reset-size10.size3 { font-size: 0.337512em; }
.katex .sizing.reset-size10.size4, .katex .fontsize-ensurer.reset-size10.size4 { font-size: 0.385728em; }
.katex .sizing.reset-size10.size5, .katex .fontsize-ensurer.reset-size10.size5 { font-size: 0.433944em; }
.katex .sizing.reset-size10.size6, .katex .fontsize-ensurer.reset-size10.size6 { font-size: 0.48216em; }
.katex .sizing.reset-size10.size7, .katex .fontsize-ensurer.reset-size10.size7 { font-size: 0.578592em; }
.katex .sizing.reset-size10.size8, .katex .fontsize-ensurer.reset-size10.size8 { font-size: 0.694311em; }
.katex .sizing.reset-size10.size9, .katex .fontsize-ensurer.reset-size10.size9 { font-size: 0.833173em; }
.katex .sizing.reset-size10.size10, .katex .fontsize-ensurer.reset-size10.size10 { font-size: 1em; }
.katex .sizing.reset-size10.size11, .katex .fontsize-ensurer.reset-size10.size11 { font-size: 1.19961em; }
.katex .sizing.reset-size11.size1, .katex .fontsize-ensurer.reset-size11.size1 { font-size: 0.200965em; }
.katex .sizing.reset-size11.size2, .katex .fontsize-ensurer.reset-size11.size2 { font-size: 0.241158em; }
.katex .sizing.reset-size11.size3, .katex .fontsize-ensurer.reset-size11.size3 { font-size: 0.28135em; }
.katex .sizing.reset-size11.size4, .katex .fontsize-ensurer.reset-size11.size4 { font-size: 0.321543em; }
.katex .sizing.reset-size11.size5, .katex .fontsize-ensurer.reset-size11.size5 { font-size: 0.361736em; }
.katex .sizing.reset-size11.size6, .katex .fontsize-ensurer.reset-size11.size6 { font-size: 0.401929em; }
.katex .sizing.reset-size11.size7, .katex .fontsize-ensurer.reset-size11.size7 { font-size: 0.482315em; }
.katex .sizing.reset-size11.size8, .katex .fontsize-ensurer.reset-size11.size8 { font-size: 0.578778em; }
.katex .sizing.reset-size11.size9, .katex .fontsize-ensurer.reset-size11.size9 { font-size: 0.694534em; }
.katex .sizing.reset-size11.size10, .katex .fontsize-ensurer.reset-size11.size10 { font-size: 0.833601em; }
.katex .sizing.reset-size11.size11, .katex .fontsize-ensurer.reset-size11.size11 { font-size: 1em; }
.katex .delimsizing.size1 { font-family: KaTeX_Size1; }
.katex .delimsizing.size2 { font-family: KaTeX_Size2; }
.katex .delimsizing.size3 { font-family: KaTeX_Size3; }
.katex .delimsizing.size4 { font-family: KaTeX_Size4; }
.katex .delimsizing.mult .delim-size1 > span { font-family: KaTeX_Size1; }
.katex .delimsizing.mult .delim-size4 > span { font-family: KaTeX_Size4; }
.katex .nulldelimiter { display: inline-block; width: 0.12em; }
.katex .delimcenter { position: relative; }
.katex .op-symbol { position: relative; }
.katex .op-symbol.small-op { font-family: KaTeX_Size1; }
.katex .op-symbol.large-op { font-family: KaTeX_Size2; }
.katex .op-limits > .vlist-t { text-align: center; }
.katex .accent > .vlist-t { text-align: center; }
.katex .accent .accent-body:not(.accent-full) { width: 0px; }
.katex .accent .accent-body { position: relative; }
.katex .overlay { display: block; }
.katex .mtable .vertical-separator { display: inline-block; margin: 0px -0.025em; border-right: 0.05em solid; }
.katex .mtable .vs-dashed { border-right: 0.05em dashed; }
.katex .mtable .arraycolsep { display: inline-block; }
.katex .mtable .col-align-c > .vlist-t { text-align: center; }
.katex .mtable .col-align-l > .vlist-t { text-align: left; }
.katex .mtable .col-align-r > .vlist-t { text-align: right; }
.katex .svg-align { text-align: left; }
.katex svg, .screenShotTempCanvas { display: block; position: absolute; width: 100%; height: inherit; fill: currentcolor; stroke: currentcolor; fill-rule: nonzero; fill-opacity: 1; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1; }
.katex svg path { stroke: none; }
.katex .stretchy { width: 100%; display: block; position: relative; overflow: hidden; }
.katex .stretchy::before, .katex .stretchy::after { content: ""; }
.katex .hide-tail { width: 100%; position: relative; overflow: hidden; }
.katex .halfarrow-left { position: absolute; left: 0px; width: 50.2%; overflow: hidden; }
.katex .halfarrow-right { position: absolute; right: 0px; width: 50.2%; overflow: hidden; }
.katex .brace-left { position: absolute; left: 0px; width: 25.1%; overflow: hidden; }
.katex .brace-center { position: absolute; left: 25%; width: 50%; overflow: hidden; }
.katex .brace-right { position: absolute; right: 0px; width: 25.1%; overflow: hidden; }
.katex .x-arrow-pad { padding: 0px 0.5em; }
.katex .x-arrow, .katex .mover, .katex .munder { text-align: center; }
.katex .boxpad { padding: 0px 0.3em; }
.katex .fbox { box-sizing: border-box; border: 0.04em solid black; }
.katex .fcolorbox { box-sizing: border-box; border: 0.04em solid; }
.katex .cancel-pad { padding: 0px 0.2em; }
.katex .cancel-lap { margin-left: -0.2em; margin-right: -0.2em; }
.katex .sout { border-bottom-style: solid; border-bottom-width: 0.08em; }
.output_wrapper pre code { display: -webkit-box !important; }
.output_wrapper .hljs{color: rgb(169, 183, 198); background: rgb(40, 43, 46); display: block; overflow-x: auto; padding: 0.5em;}

.output_wrapper .hljs-params{color: rgb(255, 152, 35);}

.output_wrapper .hljs-number,.output_wrapper .hljs-literal,.output_wrapper .hljs-symbol,.output_wrapper .hljs-bullet{color: rgb(174, 135, 250);}

.output_wrapper .hljs-function,.output_wrapper .hljs-built_in,.output_wrapper .hljs-name,.output_wrapper .hljs-keyword,.output_wrapper .hljs-selector-tag,.output_wrapper .hljs-deletion{color: rgb(248, 35, 117);}

.output_wrapper .hljs-variable,.output_wrapper .hljs-template-variable,.output_wrapper .hljs-link{color: rgb(98, 151, 85);}

.output_wrapper .hljs-comment,.output_wrapper .hljs-quote{color: rgb(128, 128, 128);}

.output_wrapper .hljs-meta{color: rgb(91, 218, 237);}

.output_wrapper .hljs-string,.output_wrapper .hljs-attribute,.output_wrapper .hljs-addition{color: rgb(238, 220, 112);}

.output_wrapper .hljs-attr,.output_wrapper .hljs-section,.output_wrapper .hljs-title,.output_wrapper .hljs-type{color: rgb(165, 218, 45);}

.output_wrapper .hljs-selector-class{color: rgb(165, 218, 45);}

.output_wrapper .hljs-emphasis{font-style: italic;}

.output_wrapper .hljs-strong{font-weight: bold;}

.output_wrapper pre code {line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px;}
.output_wrapper{font-size: 15px; color: rgb(62, 62, 62); line-height: 1.8; word-spacing: 2px; letter-spacing: 2px; font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); background-size: 20px 20px; background-position: center center;}

.output_wrapper *{font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;}

.output_wrapper p{margin: 1.7em 0px;}

.output_wrapper h1,.output_wrapper h2,.output_wrapper h3,.output_wrapper h4,.output_wrapper h5,.output_wrapper h6{margin: 1.6em 0px; font-weight: bold;}

.output_wrapper h1{font-size: 1.6em; text-align: center;}

.output_wrapper h2{font-size: 1.4em;}

.output_wrapper h3{font-size: 1.3em;}

.output_wrapper h4{font-size: 1.2em;}

.output_wrapper h5{font-size: 1em;}

.output_wrapper h6{font-size: 1em; color: rgb(255, 152, 0);}

.output_wrapper h3{border-bottom: 2px solid rgb(239, 112, 96); font-size: 1.3em;}

.output_wrapper h3 span{display: inline-block; font-weight: normal; background: rgb(239, 112, 96); color: rgb(255, 255, 255); padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;}

.output_wrapper h3::after{display: inline-block; content: " "; vertical-align: bottom; border-bottom: 36px solid rgb(239, 235, 233); border-right: 20px solid transparent;}

.output_wrapper ul,.output_wrapper ol{padding-left: 32px;}

.output_wrapper ul{list-style-type: disc;}

.output_wrapper ol{list-style-type: decimal;}

.output_wrapper li *{}

.output_wrapper li{margin-bottom: 0.5em;}

.output_wrapper .code_size_default{line-height: 18px; font-size: 14px; font-weight: normal; word-spacing: 0px; letter-spacing: 0px;}

.output_wrapper .code_size_tight{line-height: 15px; font-size: 11px; font-weight: normal; word-spacing: -3px; letter-spacing: 0px;}

.output_wrapper pre code{font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px;}

.output_wrapper blockquote{display: block; padding: 15px 15px 15px 1rem; font-size: 0.9em; margin: 1em 0px; color: rgb(0, 0, 0); border-left: 5px solid rgb(239, 112, 96); background: rgb(239, 235, 233); overflow: auto; overflow-wrap: normal; word-break: normal;}

.output_wrapper blockquote p{margin: 0px;}

.output_wrapper a{text-decoration: none; color: rgb(30, 107, 184); overflow-wrap: break-word;}

.output_wrapper strong{font-weight: bold; color: rgb(233, 105, 0);}

.output_wrapper em{color: rgb(98, 0, 234);}

.output_wrapper del{font-style: italic; text-decoration: none; color: rgb(41, 98, 255);}

.output_wrapper strong em{font-weight: bold; color: rgb(197, 17, 98);}

.output_wrapper hr{height: 1px; margin: 1.5rem 0px; border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px dashed rgb(165, 165, 165);}

.output_wrapper code{overflow-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0px 2px; color: rgb(248, 35, 117); background: rgb(248, 248, 248);}

.output_wrapper img{display: block; margin: 0px auto; max-width: 100%;}

.output_wrapper figcaption{margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;}

.output_wrapper table{display: table; width: 100%; text-align: left;}

.output_wrapper tbody{border: 0px;}

.output_wrapper table tr{border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(204, 204, 204); background-color: white;}

.output_wrapper table tr:nth-child(2n){background-color: rgb(248, 248, 248);}

.output_wrapper table tr th,.output_wrapper table tr td{font-size: 1em; border: 1px solid rgb(204, 204, 204); padding: 0.5em 1em; text-align: left;}

.output_wrapper table tr th{font-weight: bold; background-color: rgb(240, 240, 240);}

.output_wrapper .katex-display{font-size: 1.22em;}

.output_wrapper .katex{padding: 8px 3px;}

.output_wrapper .katex-display > .katex{display: inline-block; text-align: center; padding: 3px;}

.output_wrapper .katex img{display: inline-block; vertical-align: middle;}

.output_wrapper a[href^="#"] sup{vertical-align: super; margin: 0px 2px; padding: 1px 3px; color: rgb(255, 255, 255); background: rgb(102, 102, 102); font-size: 0.7em;}

.output_wrapper .task-list-list{list-style-type: none;}

.output_wrapper .task-list-list.checked{color: rgb(62, 62, 62);}

.output_wrapper .task-list-list.uncheck{color: rgb(191, 193, 191);}

.output_wrapper .task-list-list .icon_uncheck,.output_wrapper .task-list-list .icon_check{display: inline-block; vertical-align: middle; margin-right: 10px;}

.output_wrapper .task-list-list .icon_check::before{content: "√"; border: 2px solid rgb(62, 62, 62); color: red;}

.output_wrapper .task-list-list .icon_uncheck::before{content: "x"; border: 2px solid rgb(191, 193, 191); color: rgb(191, 193, 191);}

.output_wrapper .task-list-list .icon_check::before,.output_wrapper .task-list-list .icon_uncheck::before{padding: 2px 8px 2px 5px; border-radius: 5px;}

.output_wrapper .toc{margin-left: 25px;}

.output_wrapper .toc_item{display: block;}

.output_wrapper .toc_left{margin-left: 25px;}

-->

手机扫一扫

移动阅读更方便

你可能感兴趣的文章