2024年8月16日 星期五

以數字開頭的 class element

如果 HTML code 如下

<span>Hello</span>&nbsp;
<span class="123">John Smith</span>

而 CSS 寫成如下,是無法作用的

.123{
	font-weight: bold;
	color: CornflowerBlue;
}

要套用樣式,CSS code 要像下面這樣,class name 前面加上\00003才行

.\00003123{
	font-weight: bold;
	color: CornflowerBlue;
}

如果是英文、數字、符號混合的 class name,只要開頭是數字,都要這樣處理,例如:

.\00003123abc{
	/* ... */
}
.\00003123-abc{
	/* ... */
}

當然,也可以用 attribute selector來處理,像是 [class*="123abc"],只是這樣出錯的機率很高。

<span class="foo-123abc"></span>
<span class="123abc"></span>
<span class="123abc-bar"></span>

例如上面三種狀況,[class*="123abc"]的樣式都會套用到。

沒有留言:

張貼留言