个人中心
gpt4 book ai didi

php - PHP 中的 CSS 框架生成器

转载 作者：可可西里 更新时间：2023-10-31 23:23:20 25 4
gpt4 key购买 nike

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

25 4 0
文章推荐： html - Bootstrap 3 的表单字段布局问题
文章推荐： JavaScript 不保存样式属性
文章推荐： node.js - 为什么 Express 在安装时创建 Sym 链接？
文章推荐： javascript - 删除录制图标 MediaStreamRecorder.js 库？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com