Question

有谁知道从css声明中选择所有选择器最强大的正则表达式是什么？下面是非标准CSS的CSS代码，这将是一个很好的测试用例。

.somenormalstyledeclaration 
{
    width:100%;
    height:100%;
    background-image: url(images/fallback-gradient.png);
}
.somenormalstyle1, .somenormalstyle2 
{
    width:100%;
    height:100%;
    background-image: url(images/fallback-gradient.png);
}
.gradient-bg 
{
   background-color: #1a82f7;
   background-image: url(images/fallback-gradient.png);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));
   background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
   background-image:    -moz-linear-gradient(top, #2F2727, #1a82f7);
   background-image:     -ms-linear-gradient(top, #2F2727, #1a82f7);
   background-image:      -o-linear-gradient(top, #2F2727, #1a82f7);
}

@-webkit-keyframes bounce_circle 
{
    0% 
    {
        opacity:0.3;
    }
    50% 
    {
        opacity:1;
        background-color:#111
    }
    100% 
    {
        opacity:0.3;
    }
}

Answer 1

这应该主要是。这是几个步骤，但不如完整的解析器好。

用空格字符替换所有换行符
假设您从未使用包含{或}的字符串，则可以将/\{[^\}]\}/替换为,
将所有文字拆分为每个,和;字符
修剪每个选择器的开头和结尾的所有空格

数组的每个元素都应该是一个选择器或“at-rule”（即@charset utf-8;）。

我可能错过了其他一些边缘案例，但对于大多数情况，这应该是一个快速而肮脏的解决方案。

Answer 2

虽然这不涉及@ -webkit ......它只是ID和类选择器。

我确信正则表达式向导可以更有效......

This link帮助指明了方向。即使它是javascript，我也能获得要点。

// Snag file
$text = file_get_contents("file.css");

// Strip comments
$text = preg_replace('!/\*.*?\*/!s', '', $text);

// Clear out everything between brackets
$text = preg_replace('/{(.*?)}/si', '', $text);

// Get ID and class selectors
$pattern = '/([#|\.])([_a-z]+[_a-z0-9-]*)/mi';

// Array to store results.
$result = array();

// No "g' modifier in PHP, use preg_match_all for this kind of behaviour.
preg_match_all($pattern, $text, $result);

print "<pre>";
print_r ( $result );
print "</pre>";

CSS选择器的正则表达式 - PHP

2 个答案: