php - PHP 中的 CSS 帧生成器

Question

我想构建类似于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 {}

我试图尽可能多地操纵，但无法变得更好。你们能帮帮我吗？

score 2 · Accepted Answer

我正在尝试通过回答问题来学习 php。下面的代码似乎可以生成您正在寻找的输出。我希望对我所犯的任何错误给予反馈和批评。谢谢！

<?php

    function print_css($parent_node, $prefix, &$dup_checker){
      if($parent_node->nodeName == '#text'){
        return;
      }
      if ($parent_node->hasAttribute("id")) {
        $my_css = $prefix . $parent_node->nodeName . "#" . $parent_node->getAttribute("id");
      } elseif ($parent_node->hasAttribute("class")) {
          $my_css = $prefix . $parent_node->nodeName . "." . $parent_node->getAttribute("class");
      } else {
          $my_css = $prefix . $parent_node->nodeName;
      }

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

      $nodes = $parent_node->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">
            <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 id="fourth_id"><a href="#">Link 4</a></li>
                    <li id="fifth_id"><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("body");
    $css = "";
    $dup_checker = array();
    for ($i = 0; $i < $nodes->length; $i++) {
      $node = $nodes->item($i);
      print_css($node, '', $dup_checker);
    }

    ?>

Output:
body.theme {}
body.theme div.header {}
body.theme div.header h1 {}
body.theme div.header h1 a {}
body.theme div.header h1 a:link {}
body.theme div.header h1 a:visited {}
body.theme div.header h1 a:hover {}
body.theme div.header h1 a:active {}
body.theme div.header 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#fourth_id {}
body.theme div.content div.sidebar ul li#fourth_id a {}
body.theme div.content div.sidebar ul li#fourth_id a:link {}
body.theme div.content div.sidebar ul li#fourth_id a:visited {}
body.theme div.content div.sidebar ul li#fourth_id a:hover {}
body.theme div.content div.sidebar ul li#fourth_id a:active {}
body.theme div.content div.sidebar ul li#fourth_id a:focus {}
body.theme div.content div.sidebar ul li#fifth_id {}
body.theme div.content div.sidebar ul li#fifth_id a {}
body.theme div.content div.sidebar ul li#fifth_id a:link {}
body.theme div.content div.sidebar ul li#fifth_id a:visited {}
body.theme div.content div.sidebar ul li#fifth_id a:hover {}
body.theme div.content div.sidebar ul li#fifth_id a:active {}
body.theme div.content div.sidebar ul li#fifth_id a:focus {}
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 {}

score 1 · Accepted Answer

从Perry Tew的代码中分叉。尽力了！:)

从Perry Tew 拿叉子，我做了类似的事情，其中：

适用于Class和ID。
使用连接.的 s 给出的类。
给出ID第一个偏好，然后Class.
前加空格{。minor

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。

score 0 · Accepted Answer

这个怎么样？它支持 ID 并消除重复，并且可以将某些元素仅显示一次而不是 li[1] li[2]

<?php
header('Content-type: text/plain');
$source = '<body class="theme">
    <div class="header">
        <h1><a href="#">Welcome</a></h1>
    </div>
    <div class="content">
        <div id="ff">
        </div>
        <div class="sidebar">
            <ul>
                <li id="hh"><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 = array();
$paths=array();

for ($i = 0; $i < $nodes->length; $i++) {
    $node = $nodes->item($i);
    $key=$node->getNodePath();

    if(!$node->hasAttribute("class") && !$node->hasAttribute("id"))


        $paths=addPath($paths,$key,"",$node->nodeName);
        $path=process($paths,$key);
        if (!$path)continue;
        $css[$key]=str_replace(array("/"), array(" "), $path) . " {}\n";
    if ($node->hasAttribute("class")) {
        $class=$node->nodeName . "." . $node->getAttribute("class");

        $paths=addPath($paths,$key,$class,$node->nodeName);
        $path=process($paths,$key);

        $css[$key]=str_replace(array("/"), array(" "), $path) . " {}\n";
    } elseif ($node->hasAttribute("id")) {
        $id="#" . $node->getAttribute("id");
        $paths=addPath($paths,$key,$id,$node->nodeName);
        $path=process($paths,$key);

        $css[$key]=str_replace(array("/"), array(" "), $path) . " {}\n";
    }
}

$css=implode("",array_unique($css));
echo $css;

function addPath($paths,$path,$class,$name){

    $once_elems=array(
        'li','a'
    );

    $sourcePath=explode("/",$path);
    if ($sourcePath[1]=="html"){
        unset($sourcePath[1]);
    }
    $path=implode("/",$sourcePath);

    if (!$class && isset($paths[$path])){
        return $paths;
    }

    if ((in_array($name,$once_elems) && !$class) || !$class){
        $class=$name;
    }

    $paths[$path]=$class;
    return $paths;
}

function process($paths,$path){
    $sourcePath=explode("/",$path);
    if ($sourcePath[1]=="html"){
        unset($sourcePath[1]);
    }
    $sourcePath=array_values($sourcePath);
    $path=implode("/",$sourcePath);
    foreach ($paths as $k=>$v){
        if (!$k)continue;
        $ex=explode("/",$k);

        if (strpos($path,$k,0)!==false){
            $sourcePath[count($ex)-1]=$v;
        }
    }
    $path=implode("/",$sourcePath);

    return $path;
}


?>

输出：

 body.theme {}
 body.theme div.header {}
 body.theme div.header h1 {}
 body.theme div.header h1 a {}
 body.theme div.content {}
 body.theme div.content #ff {}
 body.theme div.content div.sidebar {}
 body.theme div.content div.sidebar ul {}
 body.theme div.content div.sidebar ul #hh {}
 body.theme div.content div.sidebar ul #hh a {}
 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 {}

php - PHP 中的 CSS 帧生成器

3 回答 3

从Perry Tew的代码中分叉。尽力了！:)

PHP代码：

输出：

笔记：

演示：http ://codepad.viper-7.com/UbBil2 （旧版）

最初的学分应该归Perry Tew。

Related

Reference