我想建立类似于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 © 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 © 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。