php - PHP 中的 CSS 框架生成器

标签 php html css generator

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

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

最佳答案

我正在尝试通过回答问题来学习 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 {}

关于php - PHP 中的 CSS 框架生成器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11480638/

上一篇：php - 什么时候需要使用存储在数据库中的访问 token ？

下一篇：PHP + APC : How to cache data up to 128M?

相关文章：

php - 如何匹配正则表达式中的两个单词之一？

html - 简单的 Off Canvas 菜单不起作用

html - 如果使用 <code> 作为链接标题，如何更改超链接的颜色

html - 隐藏 SVG 会影响同一页面中的其他 SVG 样式

jquery - 我怎样才能让这个插件不超过屏幕？

php - 无法在使用 php 脚本加密的 mysql 中解密

PHP 和 MongoDB 极其慢(15 秒)

php - 有哪些好的 PHP MySQL 调试工具？

html - target=_blank URI 是否仍然传递引用数据？

html - 父 div 内的 3 个动态 div，大小固定

©2024 IT工具网  联系我们