[{"data":1,"prerenderedAt":1160},["ShallowReactive",2],{"page-\u002Fcss\u002Fcss的优先级":3},{"id":4,"title":5,"body":6,"description":12,"extension":1152,"meta":1153,"navigation":426,"path":1156,"seo":1157,"stem":1158,"__hash__":1159},"content\u002Fcss\u002Fcss的优先级.md","Css的优先级",{"type":7,"value":8,"toc":1147},"minimark",[9,13,29,33,41,51,58,171,186,189,206,209,329,335,338,341,344,355,598,601,604,656,884,891,975,982,1072,1075,1143],[10,11,12],"p",{},"css有个规则， @layer，同一层叠层内的规则将层叠在一起，这给予了 web 开发者对层叠机制的更多控制",[10,14,15,20,21,25,26,28],{},[16,17],"img",{"alt":18,"src":19},"层叠层优先级示意图","https:\u002F\u002Fmdn.github.io\u002Fshared-assets\u002Fimages\u002Fdiagrams\u002Fcss\u002Fat-rules\u002Flayer-cascade.svg","\n带 ",[22,23,24],"code",{},"!important"," 标志的声明，优先于_普通声明_，即无 ",[22,27,24],{}," 标志的常规声明，过渡具有最高的优先级。",[30,31,32],"h2",{"id":32},"层叠图",[10,34,35,36,40],{},"按 ",[37,38,39],"strong",{},"CSS Cascade 5"," 规范，优先级从高到低是：",[42,43,48],"pre",{"className":44,"code":46,"language":47},[45],"language-text","1. 过渡（Transition）声明\n2. 重要用户代理声明（!important user agent）\n3. 重要用户声明（!important user）\n4. 重要作者声明（!important author）\n5. 动画（Animation）声明\n6. 普通作者声明（Normal author）\n7. 普通用户声明（Normal user）\n8. 普通用户代理声明（Normal user agent）\n","text",[22,49,46],{"__ignoreMap":50},"",[10,52,53,54,57],{},"这是层叠的",[37,55,56],{},"最高优先级","。按从低到高排列：",[59,60,61,77],"table",{},[62,63,64],"thead",{},[65,66,67,71,74],"tr",{},[68,69,70],"th",{},"优先级",[68,72,73],{},"来源",[68,75,76],{},"说明",[78,79,80,92,103,114,128,143,158],"tbody",{},[65,81,82,86,89],{},[83,84,85],"td",{},"1（最低）",[83,87,88],{},"用户代理样式",[83,90,91],{},"浏览器默认样式",[65,93,94,97,100],{},[83,95,96],{},"2",[83,98,99],{},"用户普通样式",[83,101,102],{},"用户在浏览器设置里写的",[65,104,105,108,111],{},[83,106,107],{},"3",[83,109,110],{},"作者普通样式",[83,112,113],{},"你写的普通 CSS",[65,115,116,119,122],{},[83,117,118],{},"4",[83,120,121],{},"动画（CSS Animations）",[83,123,124,127],{},[22,125,126],{},"@keyframes"," 中的样式",[65,129,130,133,138],{},[83,131,132],{},"5",[83,134,135,136],{},"作者 ",[22,137,24],{},[83,139,140,141],{},"你写的 ",[22,142,24],{},[65,144,145,148,153],{},[83,146,147],{},"6",[83,149,150,151],{},"用户 ",[22,152,24],{},[83,154,155,156],{},"用户写的 ",[22,157,24],{},[65,159,160,163,168],{},[83,161,162],{},"7（最高）",[83,164,165,166],{},"用户代理 ",[22,167,24],{},[83,169,170],{},"浏览器强制样式",[10,172,173,174,177,178,181,182,185],{},"上面最高是过渡声明，CSS 的层叠顺序首先看",[37,175,176],{},"来源与重要性（Origin & Importance）","，",[22,179,180],{},"@layer"," 只是在",[37,183,184],{},"作者样式（Author Styles）"," 内部调整优先级的工具，它无法跨越来源的层级去挑战更高优先级的声明。",[10,187,188],{},"最容易混淆的是用户声明和作者声明。作者是网页开发者，写CSS\u002FHTML的人，用户是网页分访问者，用户在浏览器设置里自定义的样式，或通过扩展\u002F用户样式表注入的 CSS。",[10,190,191,192,195,196,199,200],{},"过渡优先级最高这个说法是来自CSS级联里面一个比较特殊的设计，和常规的优先级不是一个维度，过渡不是样式，是状态间插值，color:red -> color:blue 的情况，比如说你加了 transition: color 0.3s，浏览器会在0.3s内持续计算中间值，这个中间值在某一瞬间是 ",[22,193,194],{},"rgb(128, 0, 128)"," 之类的，它",[37,197,198],{},"既不是 red 也不是 blue","。如果这个中间值能被其他 CSS 规则覆盖，过渡就会“抖动”或“卡顿”。所以规范规定：",[37,201,202,203,205],{},"过渡期间计算出来的值，优先级高于任何其他声明，包括 ",[22,204,24],{},"。",[30,207,208],{"id":208},"普通作者声明内部优先级",[59,210,211,222],{},[62,212,213],{},[65,214,215,217,219],{},[68,216,70],{},[68,218,73],{},[68,220,221],{},"例子",[78,223,224,239,253,274,291,306],{},[65,225,226,229,234],{},[83,227,228],{},"1",[83,230,231],{},[37,232,233],{},"行内 style",[83,235,236],{},[22,237,238],{},"\u003Cdiv style=\"color: red\">",[65,240,241,243,248],{},[83,242,96],{},[83,244,245],{},[37,246,247],{},"ID 选择器",[83,249,250],{},[22,251,252],{},"#header",[65,254,255,257,262],{},[83,256,107],{},[83,258,259],{},[37,260,261],{},"类 \u002F 属性 \u002F 伪类",[83,263,264,267,268,267,271],{},[22,265,266],{},".btn","、",[22,269,270],{},"[type=\"text\"]",[22,272,273],{},":hover",[65,275,276,278,283],{},[83,277,118],{},[83,279,280],{},[37,281,282],{},"元素 \u002F 伪元素",[83,284,285,267,288],{},[22,286,287],{},"div",[22,289,290],{},"::before",[65,292,293,295,300],{},[83,294,132],{},[83,296,297],{},[37,298,299],{},"通配符 \u002F 继承",[83,301,302,305],{},[22,303,304],{},"*","、继承来的值",[65,307,308,325,327],{},[83,309,310,311,314,315,317,318,321,322,205],{},"CSS有一个叫做(a, b, c) 三元组表示法来表示选择器优先级，行内 style 的优先级是 ",[22,312,313],{},"(1, 0, 0, 0)","，比任何选择器都高，",[22,316,24],{}," 的优先级",[37,319,320],{},"高于所有普通声明","，包括行内 style。比较规则：",[37,323,324],{},"从左到右逐位比，大的赢",[83,326],{},[83,328],{},[42,330,333],{"className":331,"code":332,"language":47},[45],"#header .nav a { }     \u002F* (1, 1, 1) *\u002F\n.nav a { }             \u002F* (0, 1, 1) *\u002F\na { }                  \u002F* (0, 0, 1) *\u002F\n",[22,334,332],{"__ignoreMap":50},[10,336,337],{},"常用选择器：",[10,339,340],{},"后代选择器： 空格\n直接子选择器： >\n相邻兄弟： +\n通用兄弟： ~",[10,342,343],{},"上面的会改变锚点，在最右边，前面都是限定路径，而has不会，has的锚点在最左侧。",[10,345,346,347,350,351,354],{},"父选择器： ",[348,349],"has",{}," ，它本质是",[37,352,353],{},"关系选择器","，可以做很多以前需要 JS 才能做的事：",[42,356,360],{"className":357,"code":358,"language":359,"meta":50,"style":50},"language-css shiki shiki-themes github-light github-dark","\u002F* 选中「内部包含 img 的 div」 *\u002F\ndiv:has(img) {\n  border: 1px solid #ccc;\n}\n\n\u002F* 表单里有 input 聚焦时，给表单加样式 *\u002F\nform:has(input:focus) {\n  border-color: blue;\n}\n\n\u002F* 选中「后面跟着 p 的 h2」 *\u002F\nh2:has(+ p) {\n  margin-bottom: 0;\n}\n如果你想选中一个元素，条件是它左右紧邻的兄弟元素和它标签相同，CSS 没有直接的“左右都判断”选择器，但可以用组合方式实现。\n\u002F* 选中一个元素，它的前一个兄弟和后一个兄弟都是同类标签 *\u002F\ndiv + div:has(+ div) { ... }\n\n\u002F* 选中「不包含任何子元素的空 div」 *\u002F\ndiv:not(:has(*)) {\n  display: none;\n}\n","css",[22,361,362,371,390,415,421,428,434,452,465,470,475,481,498,511,516,522,528,550,555,561,580,593],{"__ignoreMap":50},[363,364,367],"span",{"class":365,"line":366},"line",1,[363,368,370],{"class":369},"sJ8bj","\u002F* 选中「内部包含 img 的 div」 *\u002F\n",[363,372,374,377,381,385,387],{"class":365,"line":373},2,[363,375,287],{"class":376},"s9eBZ",[363,378,380],{"class":379},"sScJk",":has",[363,382,384],{"class":383},"sVt8B","(",[363,386,16],{"class":376},[363,388,389],{"class":383},") {\n",[363,391,393,397,400,402,406,409,412],{"class":365,"line":392},3,[363,394,396],{"class":395},"sj4cs","  border",[363,398,399],{"class":383},": ",[363,401,228],{"class":395},[363,403,405],{"class":404},"szBVR","px",[363,407,408],{"class":395}," solid",[363,410,411],{"class":395}," #ccc",[363,413,414],{"class":383},";\n",[363,416,418],{"class":365,"line":417},4,[363,419,420],{"class":383},"}\n",[363,422,424],{"class":365,"line":423},5,[363,425,427],{"emptyLinePlaceholder":426},true,"\n",[363,429,431],{"class":365,"line":430},6,[363,432,433],{"class":369},"\u002F* 表单里有 input 聚焦时，给表单加样式 *\u002F\n",[363,435,437,440,442,444,447,450],{"class":365,"line":436},7,[363,438,439],{"class":376},"form",[363,441,380],{"class":379},[363,443,384],{"class":383},[363,445,446],{"class":376},"input",[363,448,449],{"class":379},":focus",[363,451,389],{"class":383},[363,453,455,458,460,463],{"class":365,"line":454},8,[363,456,457],{"class":395},"  border-color",[363,459,399],{"class":383},[363,461,462],{"class":395},"blue",[363,464,414],{"class":383},[363,466,468],{"class":365,"line":467},9,[363,469,420],{"class":383},[363,471,473],{"class":365,"line":472},10,[363,474,427],{"emptyLinePlaceholder":426},[363,476,478],{"class":365,"line":477},11,[363,479,480],{"class":369},"\u002F* 选中「后面跟着 p 的 h2」 *\u002F\n",[363,482,484,486,488,490,493,496],{"class":365,"line":483},12,[363,485,30],{"class":376},[363,487,380],{"class":379},[363,489,384],{"class":383},[363,491,492],{"class":404},"+",[363,494,495],{"class":376}," p",[363,497,389],{"class":383},[363,499,501,504,506,509],{"class":365,"line":500},13,[363,502,503],{"class":395},"  margin-bottom",[363,505,399],{"class":383},[363,507,508],{"class":395},"0",[363,510,414],{"class":383},[363,512,514],{"class":365,"line":513},14,[363,515,420],{"class":383},[363,517,519],{"class":365,"line":518},15,[363,520,521],{"class":383},"如果你想选中一个元素，条件是它左右紧邻的兄弟元素和它标签相同，CSS 没有直接的“左右都判断”选择器，但可以用组合方式实现。\n",[363,523,525],{"class":365,"line":524},16,[363,526,527],{"class":369},"\u002F* 选中一个元素，它的前一个兄弟和后一个兄弟都是同类标签 *\u002F\n",[363,529,531,533,536,539,541,543,545,547],{"class":365,"line":530},17,[363,532,287],{"class":376},[363,534,535],{"class":404}," +",[363,537,538],{"class":376}," div",[363,540,380],{"class":379},[363,542,384],{"class":383},[363,544,492],{"class":404},[363,546,538],{"class":376},[363,548,549],{"class":383},") { ... }\n",[363,551,553],{"class":365,"line":552},18,[363,554,427],{"emptyLinePlaceholder":426},[363,556,558],{"class":365,"line":557},19,[363,559,560],{"class":369},"\u002F* 选中「不包含任何子元素的空 div」 *\u002F\n",[363,562,564,566,569,571,573,575,577],{"class":365,"line":563},20,[363,565,287],{"class":376},[363,567,568],{"class":379},":not",[363,570,384],{"class":383},[363,572,380],{"class":379},[363,574,384],{"class":383},[363,576,304],{"class":376},[363,578,579],{"class":383},")) {\n",[363,581,583,586,588,591],{"class":365,"line":582},21,[363,584,585],{"class":395},"  display",[363,587,399],{"class":383},[363,589,590],{"class":395},"none",[363,592,414],{"class":383},[363,594,596],{"class":365,"line":595},22,[363,597,420],{"class":383},[10,599,600],{},"然后我再补充一些伪类选择器。",[30,602,603],{"id":603},"其他选择器",[59,605,606,621],{},[62,607,608],{},[65,609,610,615,618],{},[68,611,612],{},[22,613,614],{},":first-child",[68,616,617],{},"结构位置",[68,619,620],{},"是否是父元素第一个子元素",[78,622,623,635,647],{},[65,624,625,630,632],{},[83,626,627],{},[22,628,629],{},":last-child",[83,631,617],{},[83,633,634],{},"是否是父元素最后一个子元素",[65,636,637,642,644],{},[83,638,639],{},[22,640,641],{},":nth-child(n)",[83,643,617],{},[83,645,646],{},"是否是父元素第 n 个子元素",[65,648,649,652,654],{},[83,650,651],{},"属性选择器CSS中根据HTML元素的属性或者属性值来选中元素的选择器，它不依赖标签名、类名或 ID，而是直接看元素身上“带了什么属性”。",[83,653],{},[83,655],{},[42,657,661],{"className":658,"code":659,"language":660,"meta":50,"style":50},"language-html shiki shiki-themes github-light github-dark","[属性名]           \u002F* 有这个属性就选中 *\u002F\n[属性名=\"值\"]      \u002F* 属性值完全等于 *\u002F\n[属性名~=\"值\"]     \u002F* 属性值包含某个单词（空格分隔） *\u002F\n[属性名|=\"值\"]     \u002F* 属性值等于该值或以该值开头后跟 - *\u002F\n[属性名^=\"值\"]     \u002F* 属性值以该值开头 *\u002F\n[属性名$=\"值\"]     \u002F* 属性值以该值结尾 *\u002F\n[属性名*=\"值\"]     \u002F* 属性值包含该子串 *\u002F\n\u003Ca href=\"https:\u002F\u002Fexample.com\">链接\u003C\u002Fa>\n\u003Cinput type=\"text\" placeholder=\"用户名\">\n\u003Cimg src=\"logo.png\" alt=\"网站logo\">\n\u003Cdiv data-role=\"admin\">管理员\u003C\u002Fdiv>\n\n\u002F* 1. 有 href 属性的 a 元素 *\u002F\na[href] { color: blue; }\n\n\u002F* 2. type 正好是 text 的 input *\u002F\ninput[type=\"text\"] { border: 1px solid #ccc; }\n\n\u002F* 3. alt 里包含 \"logo\" 这个词（空格分隔的单词） *\u002F\nimg[alt~=\"logo\"] { outline: 2px solid red; }\n\n\u002F* 4. data-role 以 \"admin\" 开头 *\u002F\ndiv[data-role^=\"admin\"] { background: gold; }\n\n\u002F* 5. src 以 .png 结尾 *\u002F\nimg[src$=\".png\"] { border: 1px solid green; }\n\n\u002F* 6. href 里包含 \"example\" *\u002F\na[href*=\"example\"] { font-weight: bold; }\n","html",[22,662,663,668,673,678,683,688,693,698,724,748,772,793,797,802,807,811,816,821,825,830,835,839,844,850,855,861,867,872,878],{"__ignoreMap":50},[363,664,665],{"class":365,"line":366},[363,666,667],{"class":383},"[属性名]           \u002F* 有这个属性就选中 *\u002F\n",[363,669,670],{"class":365,"line":373},[363,671,672],{"class":383},"[属性名=\"值\"]      \u002F* 属性值完全等于 *\u002F\n",[363,674,675],{"class":365,"line":392},[363,676,677],{"class":383},"[属性名~=\"值\"]     \u002F* 属性值包含某个单词（空格分隔） *\u002F\n",[363,679,680],{"class":365,"line":417},[363,681,682],{"class":383},"[属性名|=\"值\"]     \u002F* 属性值等于该值或以该值开头后跟 - *\u002F\n",[363,684,685],{"class":365,"line":423},[363,686,687],{"class":383},"[属性名^=\"值\"]     \u002F* 属性值以该值开头 *\u002F\n",[363,689,690],{"class":365,"line":430},[363,691,692],{"class":383},"[属性名$=\"值\"]     \u002F* 属性值以该值结尾 *\u002F\n",[363,694,695],{"class":365,"line":436},[363,696,697],{"class":383},"[属性名*=\"值\"]     \u002F* 属性值包含该子串 *\u002F\n",[363,699,700,703,706,709,712,716,719,721],{"class":365,"line":454},[363,701,702],{"class":383},"\u003C",[363,704,705],{"class":376},"a",[363,707,708],{"class":379}," href",[363,710,711],{"class":383},"=",[363,713,715],{"class":714},"sZZnC","\"https:\u002F\u002Fexample.com\"",[363,717,718],{"class":383},">链接\u003C\u002F",[363,720,705],{"class":376},[363,722,723],{"class":383},">\n",[363,725,726,728,730,733,735,738,741,743,746],{"class":365,"line":467},[363,727,702],{"class":383},[363,729,446],{"class":376},[363,731,732],{"class":379}," type",[363,734,711],{"class":383},[363,736,737],{"class":714},"\"text\"",[363,739,740],{"class":379}," placeholder",[363,742,711],{"class":383},[363,744,745],{"class":714},"\"用户名\"",[363,747,723],{"class":383},[363,749,750,752,754,757,759,762,765,767,770],{"class":365,"line":472},[363,751,702],{"class":383},[363,753,16],{"class":376},[363,755,756],{"class":379}," src",[363,758,711],{"class":383},[363,760,761],{"class":714},"\"logo.png\"",[363,763,764],{"class":379}," alt",[363,766,711],{"class":383},[363,768,769],{"class":714},"\"网站logo\"",[363,771,723],{"class":383},[363,773,774,776,778,781,783,786,789,791],{"class":365,"line":477},[363,775,702],{"class":383},[363,777,287],{"class":376},[363,779,780],{"class":379}," data-role",[363,782,711],{"class":383},[363,784,785],{"class":714},"\"admin\"",[363,787,788],{"class":383},">管理员\u003C\u002F",[363,790,287],{"class":376},[363,792,723],{"class":383},[363,794,795],{"class":365,"line":483},[363,796,427],{"emptyLinePlaceholder":426},[363,798,799],{"class":365,"line":500},[363,800,801],{"class":383},"\u002F* 1. 有 href 属性的 a 元素 *\u002F\n",[363,803,804],{"class":365,"line":513},[363,805,806],{"class":383},"a[href] { color: blue; }\n",[363,808,809],{"class":365,"line":518},[363,810,427],{"emptyLinePlaceholder":426},[363,812,813],{"class":365,"line":524},[363,814,815],{"class":383},"\u002F* 2. type 正好是 text 的 input *\u002F\n",[363,817,818],{"class":365,"line":530},[363,819,820],{"class":383},"input[type=\"text\"] { border: 1px solid #ccc; }\n",[363,822,823],{"class":365,"line":552},[363,824,427],{"emptyLinePlaceholder":426},[363,826,827],{"class":365,"line":557},[363,828,829],{"class":383},"\u002F* 3. alt 里包含 \"logo\" 这个词（空格分隔的单词） *\u002F\n",[363,831,832],{"class":365,"line":563},[363,833,834],{"class":383},"img[alt~=\"logo\"] { outline: 2px solid red; }\n",[363,836,837],{"class":365,"line":582},[363,838,427],{"emptyLinePlaceholder":426},[363,840,841],{"class":365,"line":595},[363,842,843],{"class":383},"\u002F* 4. data-role 以 \"admin\" 开头 *\u002F\n",[363,845,847],{"class":365,"line":846},23,[363,848,849],{"class":383},"div[data-role^=\"admin\"] { background: gold; }\n",[363,851,853],{"class":365,"line":852},24,[363,854,427],{"emptyLinePlaceholder":426},[363,856,858],{"class":365,"line":857},25,[363,859,860],{"class":383},"\u002F* 5. src 以 .png 结尾 *\u002F\n",[363,862,864],{"class":365,"line":863},26,[363,865,866],{"class":383},"img[src$=\".png\"] { border: 1px solid green; }\n",[363,868,870],{"class":365,"line":869},27,[363,871,427],{"emptyLinePlaceholder":426},[363,873,875],{"class":365,"line":874},28,[363,876,877],{"class":383},"\u002F* 6. href 里包含 \"example\" *\u002F\n",[363,879,881],{"class":365,"line":880},29,[363,882,883],{"class":383},"a[href*=\"example\"] { font-weight: bold; }\n",[10,885,886,887,890],{},"CSS自定义属性： 属性名以 ",[22,888,889],{},"--"," 开头，值可以是任意 CSS 值。",[42,892,894],{"className":357,"code":893,"language":359,"meta":50,"style":50},"\u003Cdiv class=\"item\" style=\"--i: 0\">\u003C\u002Fdiv>\n\u003Cdiv class=\"item\" style=\"--i: 1\">\u003C\u002Fdiv>\n\u003Cdiv class=\"item\" style=\"--i: 2\">\u003C\u002Fdiv>\n:root {\n  --primary-color: #3b82f6;\n  --spacing: 16px;\n  --i: 1;\n}\n",[22,895,896,907,916,925,933,946,960,971],{"__ignoreMap":50},[363,897,898,901,904],{"class":365,"line":366},[363,899,900],{"class":383},"\u003Cdiv class=\"item\" style=\"--i: 0\"",[363,902,903],{"class":404},">",[363,905,906],{"class":383},"\u003C\u002Fdiv>\n",[363,908,909,912,914],{"class":365,"line":373},[363,910,911],{"class":383},"\u003Cdiv class=\"item\" style=\"--i: 1\"",[363,913,903],{"class":404},[363,915,906],{"class":383},[363,917,918,921,923],{"class":365,"line":392},[363,919,920],{"class":383},"\u003Cdiv class=\"item\" style=\"--i: 2\"",[363,922,903],{"class":404},[363,924,906],{"class":383},[363,926,927,930],{"class":365,"line":417},[363,928,929],{"class":379},":root",[363,931,932],{"class":383}," {\n",[363,934,935,939,941,944],{"class":365,"line":423},[363,936,938],{"class":937},"s4XuR","  --primary-color",[363,940,399],{"class":383},[363,942,943],{"class":395},"#3b82f6",[363,945,414],{"class":383},[363,947,948,951,953,956,958],{"class":365,"line":430},[363,949,950],{"class":937},"  --spacing",[363,952,399],{"class":383},[363,954,955],{"class":395},"16",[363,957,405],{"class":404},[363,959,414],{"class":383},[363,961,962,965,967,969],{"class":365,"line":436},[363,963,964],{"class":937},"  --i",[363,966,399],{"class":383},[363,968,228],{"class":395},[363,970,414],{"class":383},[363,972,973],{"class":365,"line":454},[363,974,420],{"class":383},[10,976,977,978,981],{},"用 ",[22,979,980],{},"var()"," 函数。",[42,983,985],{"className":357,"code":984,"language":359,"meta":50,"style":50},"\u003Cdiv class=\"item\" style=\"--i: 0\">\u003C\u002Fdiv>\n\u003Cdiv class=\"item\" style=\"--i: 1\">\u003C\u002Fdiv>\n\u003Cdiv class=\"item\" style=\"--i: 2\">\u003C\u002Fdiv>\n.button {\n  color: var(--primary-color);\n  padding: var(--spacing);\n  z-index: var(--i);\n}\n",[22,986,987,995,1003,1011,1018,1036,1052,1068],{"__ignoreMap":50},[363,988,989,991,993],{"class":365,"line":366},[363,990,900],{"class":383},[363,992,903],{"class":404},[363,994,906],{"class":383},[363,996,997,999,1001],{"class":365,"line":373},[363,998,911],{"class":383},[363,1000,903],{"class":404},[363,1002,906],{"class":383},[363,1004,1005,1007,1009],{"class":365,"line":392},[363,1006,920],{"class":383},[363,1008,903],{"class":404},[363,1010,906],{"class":383},[363,1012,1013,1016],{"class":365,"line":417},[363,1014,1015],{"class":379},".button",[363,1017,932],{"class":383},[363,1019,1020,1023,1025,1028,1030,1033],{"class":365,"line":423},[363,1021,1022],{"class":395},"  color",[363,1024,399],{"class":383},[363,1026,1027],{"class":395},"var",[363,1029,384],{"class":383},[363,1031,1032],{"class":937},"--primary-color",[363,1034,1035],{"class":383},");\n",[363,1037,1038,1041,1043,1045,1047,1050],{"class":365,"line":430},[363,1039,1040],{"class":395},"  padding",[363,1042,399],{"class":383},[363,1044,1027],{"class":395},[363,1046,384],{"class":383},[363,1048,1049],{"class":937},"--spacing",[363,1051,1035],{"class":383},[363,1053,1054,1057,1059,1061,1063,1066],{"class":365,"line":436},[363,1055,1056],{"class":395},"  z-index",[363,1058,399],{"class":383},[363,1060,1027],{"class":395},[363,1062,384],{"class":383},[363,1064,1065],{"class":937},"--i",[363,1067,1035],{"class":383},[363,1069,1070],{"class":365,"line":454},[363,1071,420],{"class":383},[10,1073,1074],{},"css变量最大优势是运行时可变，可以让主题切换、动态计算、响应式调整变得更加容易：",[42,1076,1080],{"className":1077,"code":1078,"language":1079,"meta":50,"style":50},"language-js shiki shiki-themes github-light github-dark","\u002F\u002F 读\nconst value = getComputedStyle(element).getPropertyValue('--i')\n\n\u002F\u002F 写\nelement.style.setProperty('--i', 3)\n","js",[22,1081,1082,1087,1115,1119,1124],{"__ignoreMap":50},[363,1083,1084],{"class":365,"line":366},[363,1085,1086],{"class":369},"\u002F\u002F 读\n",[363,1088,1089,1092,1095,1098,1101,1104,1107,1109,1112],{"class":365,"line":373},[363,1090,1091],{"class":404},"const",[363,1093,1094],{"class":395}," value",[363,1096,1097],{"class":404}," =",[363,1099,1100],{"class":379}," getComputedStyle",[363,1102,1103],{"class":383},"(element).",[363,1105,1106],{"class":379},"getPropertyValue",[363,1108,384],{"class":383},[363,1110,1111],{"class":714},"'--i'",[363,1113,1114],{"class":383},")\n",[363,1116,1117],{"class":365,"line":392},[363,1118,427],{"emptyLinePlaceholder":426},[363,1120,1121],{"class":365,"line":417},[363,1122,1123],{"class":369},"\u002F\u002F 写\n",[363,1125,1126,1129,1132,1134,1136,1139,1141],{"class":365,"line":423},[363,1127,1128],{"class":383},"element.style.",[363,1130,1131],{"class":379},"setProperty",[363,1133,384],{"class":383},[363,1135,1111],{"class":714},[363,1137,1138],{"class":383},", ",[363,1140,107],{"class":395},[363,1142,1114],{"class":383},[1144,1145,1146],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":50,"searchDepth":373,"depth":373,"links":1148},[1149,1150,1151],{"id":32,"depth":373,"text":32},{"id":208,"depth":373,"text":208},{"id":603,"depth":373,"text":603},"md",{"date":1154,"tags":1155},"2026-10-11",[359],"\u002Fcss\u002Fcss的优先级",{"description":12},"css\u002Fcss的优先级","lsw2ddeXr_ICbAccWFKvDjGXfmo_zrWqweXGqkrVrvI",1791740439871]