Home Articles

正则表达式匹配CSS类名称

Asked
Viewed 1924 times
7

我正在尝试编写一个匹配有效的CSS类名结构的正则表达式 . 到目前为止我有这个:

$pattern = "([A-Za-z]*\.[A-Za-z]+\s*{)";

$regex = preg_match_all($pattern, $html, $matches);

但是,类名可以采用我的正则表达式不匹配的以下格式:

p.my_class{
}
p.thisclas45{
}

这些仅仅是一些情况,我已经四处查找了如何在样式块中命名类但无法找到任何内容的规则 . 任何人都知道类命名约定的规则在哪里?

我还需要考虑更多的案例吗?你会用什么正则表达式来匹配一个类名?

我已经使用PHP DOM Document类将其缩小为样式块 .

2 Answers

  • 15

    看看http://www.w3.org/TR/CSS21/grammar.html#scanner

    根据这个语法和帖子Which characters are valid in CSS class names/selectors?这应该是扫描css类的正确模式:

    \.-?[_a-zA-Z]+[_a-zA-Z0-9-]*\s*\{
    

    注意:标记名称不需要作为css中类的前缀 . 只需 .hello { border: 1; } 也有效 .

  • 2

    这个正则表达式:

    /(\w+)?(\s*>\s*)?(#\w+)?\s*(\.\w+)?\s*{/gm
    

    将匹配以下任何一项:

    p.my_class{}
    p.thisclas45{}
    .simple_class{}
    tag#id.class{}
    tag > #id{}
    

    您可以在RegExr上使用它,here .

Related