Perry

Perry

关注
发信
关注(28)粉丝(399)

php - PHP中的CSS帧生成器

我想建立类似于CSS Generator的东西。这就是我一直在做的：

<?php
header('Content-type: text/plain');
$source = '<body class="theme">
    <div class="header">
        <h1><a href="#">Welcome</a></h1>
    </div>
    <div class="content">
        <div class="sidebar">
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
        </div>
        <div class="main">
            <h2>Main Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
    </div>
    <div class="footer">
        <p>Copyright &copy; 2012 Me!</p>
    </div>
</body>';
$html = new DOMDocument;
$html->loadHTML($source);
$nodes = $html->getElementsByTagName("*");
$css = "";
for ($i = 0; $i < $nodes->length; $i++) {
    $node = $nodes->item($i);
    if(!$node->hasAttribute("class") && !$node->hasAttribute("id"))
        $css = $css . str_replace(array("/"), array(" "), $node->getNodePath()) . " {}\n";
    if ($node->hasAttribute("class")) {
        $css = $css . $node->nodeName . "." . $node->getAttribute("class") . " {}\n";
    } elseif ($node->hasAttribute("id")) {
        $css = $css . "#" . $node->getAttribute("id") . " {}\n";
    }
}
echo $css;
?>

我得到的结果不对。所需输出为：
body.theme div.header {}
body.theme div.header h1 {}
body.theme div.header h1 a {}
body.theme div.content {}
body.theme div.content div.sidebar {}
body.theme div.content div.sidebar ul {}
body.theme div.content div.sidebar ul li {}
body.theme div.content div.sidebar ul li a {}
body.theme div.content div.main {}
body.theme div.content div.main h2 {}
body.theme div.content div.main p {}
body.theme div.footer {}
body.theme div.footer p {}

但现在我得到的是：
 html {}
body.theme {}
div.header {}
 html body div[1] h1 {}
 html body div[1] h1 a {}
div.content {}
div.sidebar {}
 html body div[2] div[1] ul {}
 html body div[2] div[1] ul li[1] {}
 html body div[2] div[1] ul li[1] a {}
 html body div[2] div[1] ul li[2] {}
 html body div[2] div[1] ul li[2] a {}
 html body div[2] div[1] ul li[3] {}
 html body div[2] div[1] ul li[3] a {}
 html body div[2] div[1] ul li[4] {}
 html body div[2] div[1] ul li[4] a {}
 html body div[2] div[1] ul li[5] {}
 html body div[2] div[1] ul li[5] a {}
div.main {}
 html body div[2] div[2] h2 {}
 html body div[2] div[2] p {}
div.footer {}
 html body div[3] p {}

我试着尽可能多地操纵，但没能做得更好。你们能帮我吗？

最佳答案

从Perry Tew的代码派生。尽力了！：）
从Perry Tew拿叉子，我也做了类似的事情：
同时适用于Class和ID。
使用连接.s给出的类。
给ID第一个首选项，然后Class。
在{之前添加空格。少数的
PHP代码：

<?php

function print_css($parentTag, $prefix, &$dup_checker) {
    if ($parentTag->nodeName == '#text') {
        return;
    }
    if ($parentTag->hasAttribute("class") || $parentTag->hasAttribute("id")) {
        $idpart = ($parentTag->hasAttribute("id")) ? "#" . $parentTag->getAttribute("id") : "";
        $classpart = ($parentTag->hasAttribute("class")) ? "." . str_replace(" ", ".", $parentTag->getAttribute("class")) : "";
        $my_css = $prefix . $parentTag->nodeName . $idpart . $classpart;
    } else {
        $my_css = $prefix . $parentTag->nodeName;
    }

    if (!isset($dup_checker[$my_css])) {
        echo $my_css . " {}\n";
        if ($parentTag->nodeName == 'a') {
            foreach (array("link", "visited", "hover", "active", "focus") as $pseudo)
                echo $my_css . ':' . $pseudo . " {}\n";
        }
        $dup_checker[$my_css] = 1;
    }

    $nodes = $parentTag->childNodes;
    for ($i = 0; $i < $nodes->length; $i++) {
        $node = $nodes->item($i);
        print_css($node, $my_css . ' ', $dup_checker);
    }
}

header('Content-type: text/plain');
$source = '<body class="theme">
    <div class="header class2">
        <h1><a href="#">Welcome</a></h1>
    </div>
    <div class="content">
        <div class="sidebar">
            <ul>
                <li><a href="#">Link 1</a></li>
                <li id="hellos" class="meow wuff"><a href="#"><span>Link 2</span></a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
        </div>
        <div class="main">
            <h2>Main Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
    </div>
    <div class="footer">
        <p id="hello">Copyright &copy; 2012 Me!</p>
    </div>
</body>';
$html = new DOMDocument;
$html->loadHTML($source);
$nodes = $html->getElementsByTagName("body");
$css = "";
$dup_checker = array();
for ($i = 0; $i < $nodes->length; $i++) {
    $node = $nodes->item($i);
    print_css($node, '', $dup_checker);
}
?>

输出：
body.theme {}
body.theme div.header.class2 {}
body.theme div.header.class2 h1 {}
body.theme div.header.class2 h1 a {}
body.theme div.header.class2 h1 a:link {}
body.theme div.header.class2 h1 a:visited {}
body.theme div.header.class2 h1 a:hover {}
body.theme div.header.class2 h1 a:active {}
body.theme div.header.class2 h1 a:focus {}
body.theme div.content {}
body.theme div.content div.sidebar {}
body.theme div.content div.sidebar ul {}
body.theme div.content div.sidebar ul li {}
body.theme div.content div.sidebar ul li a {}
body.theme div.content div.sidebar ul li a:link {}
body.theme div.content div.sidebar ul li a:visited {}
body.theme div.content div.sidebar ul li a:hover {}
body.theme div.content div.sidebar ul li a:active {}
body.theme div.content div.sidebar ul li a:focus {}
body.theme div.content div.sidebar ul li#hellos.meow.wuff {}
body.theme div.content div.sidebar ul li#hellos.meow.wuff a {}
body.theme div.content div.sidebar ul li#hellos.meow.wuff a:link {}
body.theme div.content div.sidebar ul li#hellos.meow.wuff a:visited {}
body.theme div.content div.sidebar ul li#hellos.meow.wuff a:hover {}
body.theme div.content div.sidebar ul li#hellos.meow.wuff a:active {}
body.theme div.content div.sidebar ul li#hellos.meow.wuff a:focus {}
body.theme div.content div.sidebar ul li#hellos.meow.wuff a span {}
body.theme div.content div.main {}
body.theme div.content div.main h2 {}
body.theme div.content div.main p {}
body.theme div.footer {}
body.theme div.footer p#hello {}

注：
当a标记是span标记或其他标记的父标记时，它不会打印出pseudo类。有人能帮我修改密码吗？
演示：http://codepad.viper-7.com/UbBil2（旧版）
初始学分应转到Perry Tew。

07-28 02:27
Powered by LMLPHP ©2024 Perry 0.032879