php - 将php更改为可以在css中选择html

Question

我有一个 php 代码可以显示我商店的所有类别，这段代码的唯一问题是给我这个结构:ul > li > ul > li。我希望能够更改 css，例如 Parent Category 的颜色为 red 和 Child Category 的颜色为 蓝色。

我尝试使用类似的东西:

.sidebar.sidebar-additional ul li:first-child {color: red;}

但是不行，Parent Category 和 Child Category 都具有相同的红色。

我能做些什么来分别选择两个文本？

function categoryLoop($id){
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $categories = $objectManager->create('Magento\Catalog\Model\Category')->load($id);
    if($categories->hasChildren()){
    echo '<ul>';
        $subcategories = explode(',', $categories->getChildren());
        foreach ($subcategories as $category) {
            $subcategory = $objectManager->create('Magento\Catalog\Model\Category')->load($category);
            echo '<li>';
            echo $subcategory->getName();
            echo "</li>";
            if($subcategory->hasChildren()){ categoryLoop($category); }
        }
    echo "</ul>";
    }
}

html 输出是:

<ul>
    <li>Parent Category</li>
        <ul>
            <li>Child Category 1</li>
            <li>Child Category 2</li>
            <li>Child Category 3</li>
        </ul>
    </li>
</ul>

谢谢

Answer 1

有两种方法可以做到这一点:

<强>1。 CSS

将父项设置为红色，将子项设置为蓝色。

.container > ul > li {
    color: blue;
}

.container > ul > li > ul > li {
    color: red;
}

<强>2。 PHP

输出带有一些预定义类的父类，以及带有不同类的子类:

<?php

$output = "";
foreach($groups as $group){
    $output .= "<ul class='parent'>";  // <---- add class here
    foreach($parent as $key => $category){
        $children = get_children($key);
        $output .= "<li>" . $category . "</li>";
        if(count($children) > 0){
            $output .= "<ul class='child'>";   // <---- add class here
            foreach($children as $key2 => category2){
                $output .= "<li>" . $category2 . "</li>";        
            } 
            $output .= "</ul>";
        } 
    }
}

然后使用 CSS:

.parent {
    color: blue;
}

.child {
    color: red;
}

您提供的代码应该像这样更改:

function categoryLoop($id, $is_sub = false){
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $categories = $objectManager->create('Magento\Catalog\Model\Category')->load($id);
    if($categories->hasChildren()){
    echo '<ul' . (($is_sub) ? ' class="category_children"' : '') . '>';
        $subcategories = explode(',', $categories->getChildren());
        foreach ($subcategories as $category) {
            $subcategory = $objectManager->create('Magento\Catalog\Model\Category')->load($category);
            echo '<li>';
            echo $subcategory->getName();
            echo "</li>";
            if($subcategory->hasChildren()){ categoryLoop($category, true); }
        }
    echo "</ul>";
    }
}

然后:

.sidebar.sidebar-additional ul li {
   color: blue;
}

.sidebar.sidebar-additional ul.category_children li {
   color: red;
}