PHP 中的 CSS 帧生成器

【问题标题】：CSS Frame Generator in PHPPHP 中的 CSS 帧生成器
【发布时间】：2012-07-13 21:41:02
【问题描述】：

我想构建类似于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 html css generator


    【解决方案1】：

    来自Perry Tew 的代码。尽力了！ :)

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

    1. 适用于Class 和ID。
    2. 使用串联的.s 给出类。
    3. 优先选择ID，然后是Class。
    4. 在{ 之前添加了空格。 次要

    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。

    【讨论】：

    • 多类连接是一个不错的改进。
    • 需要检查所有条件。您还可以包括@PerryTew 完成的 :hover 和 :link 吗？这样我就可以标记这个答案了。
    • 当a 标签是span 标签或其他标签的父标签时，它不会打印出pseudo 类。谁能帮我修改代码？
    【解决方案2】：

    这个怎么样？它支持 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 {}

    【讨论】：

      【解决方案3】：

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

      【讨论】：

      • 哦，与您想要的输出相比，它输出的唯一额外的 css 规则是“body.theme{}”，但我认为这也是一个有效的规则，所以我没有编码出来。
      • 让我检查并告诉你！
      • 太棒了！你也可以为ID 做同样的事情吗？即，当有 &lt;p id="hi"&gt; 之类的东西时，它应该返回为 p#hi。
      • 我想是的。如果元素同时包含 id 和类，你会喜欢什么行为？你想同时输出吗？还是应该id优先于class，只在规则中输出id？
      • 可能还值得遍历 a 元素的各种伪选择器样式（a:link、a:visited、a:hover、a:active、a:focus）。跨度>
      猜你喜欢
      • 1970-01-01
      • 2015-04-03
      • 2013-10-21
      • 1970-01-01
      • 2022-11-11
      • 2017-09-03
      • 2013-10-28
      • 2013-11-19
      • 2017-02-15
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode