问题背景:
HTML5之前,class和id的命名是不支持以数字开头的,但从HTML5开始就支持了。
然而css中有效的类名需要满足以下条件:
- 有效名称应以下划线 (_)、连字符 (-) 或字母 (a-z)/(A-Z) 开头,后跟任何数字、连字符、下划线、字母。
- 不能以数字开头
- 名称的长度至少应为两个字符
- 不能以两个连字符或连字符后跟数字开头
解决办法:
假设我们要选择:
<a class='3-d'>
css提供了一种叫做规避(escape)的写法,可以实现数字开头命名的选择:
1. 首先获取字符的十六进制转码数,以3为例:
python:
hex(ord('3'))
#输出 '0x33'
js:
console.log('3'.charCodeAt().toString(16)); // 输出 33
2. 构造选择器,有两种方法
(1)斜杠(\)十六进制转码数加空格:.\33 -d
(2) 斜杠(\)加四个0,加十六进制转码数:.\000033-d (个人喜欢用这种方法)
例:
ele.query_selector(".\\33 -d")# 要转义,所以多加一个斜杠
ele.query_selector(".\\000033-d")# 要转义,所以多加一个斜杠
参考:
Which characters are valid in CSS class names/selectors? - GeeksforGeeks