今天我們將討論如何通過CSS正則表達式來檢查手機號碼的有效性。

/* CSS正則表達式：驗證11位中國手機號 */
input[type=tel]:valid {
/* 手機號格式正確 */
border: 2px solid green;
}
input[type=tel]:invalid {
/* 手機號格式錯誤 */
border: 2px solid red;
}
/* 定義正則表達式 */
input[type=tel]:not(:placeholder-shown):not(:valid) {
/* 限制輸入為11位數字 */
-webkit-pattern="[0-9]{11}";
-moz-pattern="[0-9]{11}";
pattern="[0-9]{11}";
}
/* 手機號輸入框樣式 */
input[type=tel] {
/* 去除輸入框默認樣式 */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/* 添加邊框及其他樣式 */
border: 2px solid gray;
border-radius: 5px;
padding: 5px;
}

使用CSS正則表達式的好處是可以減少前端代碼量，使代碼結構更加簡潔。此外，CSS正則表達式也可用于校驗其他格式的表單數據，例如郵箱、身份證號等。

需要注意的是，CSS正則表達式的支持程度有限，在舊版本的瀏覽器上可能無法正常工作，因此我們需要在設計時考慮到兼容性問題。