CSS混乱在我的代码中的一个语句中

Question

中 id^的含义是什么

[id^=" slide"]：检查 .slide

这条线在CSS代码中存在，我无法弄清楚其含义。请帮助我清除此疑问。

Answer 1

^=，在这种情况下，表示"以"为单位。因此，该选择器将查找具有"幻灯片"的ID的任何内容，然后检查，然后直接应用于.slide。

这是属性选择器的MDN倒数。与^=密切相关的是*=（匹配字符串中的任何位置）和$=（在字符串末端匹配）。这是一个演示！

[id*="slide"] {
height: 30px;
display: inline-block;
border: 1px solid black;
padding: 10px;
}
[id^="slide"] {
background: orange;
}
[id$="2"] {
background: skyblue;
}

<div id="slide-1">#slide-1</div>
<div id="slide-2">#slide-2</div>
<div id="not-a-slide">#not-a-slide</div>