regex 正则表达式匹配CSS类名

6za6bjd0 于 2023-05-23 发布在其他

关注(0)|答案(3)|浏览(126)

我试图写一个正则表达式匹配一个有效的CSS类名结构。到目前为止我有这个：

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

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

但是，类名可以是以下格式，我的正则表达式不会匹配：

p.my_class{
}
p.thisclas45{
}

这些只是一些例子，我已经四处寻找如何在样式块中命名类的规则，但没有找到任何东西。有谁知道类命名约定的规则在哪里？
还有什么案子需要我考虑吗你会用什么正则表达式来匹配一个类名？
我已经使用PHPDOMDocument类将其缩小到一个样式块。

regex

来源：https://stackoverflow.com/questions/6329090/regex-to-match-a-css-class-name

3条答案

按热度按时间

k7fdbhmy1#

查看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; }也是有效的。

赞(0）回复(0）举报 2023-05-23

lymnna712#

这个regex：

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

将匹配以下任何一项：

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

您可以在RegExr，here上使用它。

赞(0）回复(0）举报 2023-05-23

lnxxn5zx3#

这个正则表达式将选择CSS文件中的所有类，无论CSS代码有多复杂。

/(?<=\.)([a-zA-Z0-9_-]+)(?![^\{]*\})/g

例如：

.class-1:focus > :is(button, a, div) > :first-child > .class2:first-child > .class_3 #id-1 + * { 
    padding: 8.3px;
    -webkit-box-align: center;
    color: #ff4834 !important;
}
@keyframes shimmer {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    to {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

输出：

['class-1', 'class2', 'class_3']

赞(0）回复(0）举报 2023-05-23

我来回答

regex 正则表达式匹配CSS类名

3条答案

相关问题

热门标签

最新问答