Question

我想知道如何解析以下数组并将其生成为CSS，这里是数组：

$css = array(
        '.item-image|text-align' => 'center',
        '.item-image|vertical-align' => 'middle',
        '.item-image img.single_image|width' => '300px'
    );

对于上面的数组，我需要得到如下结果：

.item-image {
    text-align: center;
    vertical-align: middle;
}

.item-image img.single_image {
    width: 300px;
}

如您所见，CSS类和CSS属性之间用 | 分隔，并且第一和第二个数组具有相同的键，因此它应该合并文本-align 和 vertical-align 在同一标记中（在 .item-image 类中）。

谢谢，我真的很感激任何帮助：）

Answer 1

我会为你提供一些小提示来解决你的问题。我不会说这是一个最好的办法。但它可能对你有所帮助

#######

输出

<?php
$css = array(
        '.item-image|text-align' => 'center',
        '.item-image|vertical-align' => 'middle',
        '.item-image img.single_image|width' => '300px'
    );

    foreach($css  as $key=>$val){

        $response=explode('|',$key);

        echo $response[0].' {'.$response[1].':'.$val.'}';

    }

它还没完全完成你必须检查密钥是否已经存在然后你必须更新你的css proeprty假设你可能.item-image {text-align:center} .item-image {vertical-align:middle} .item-image img.single_image {width:300px}有多个时间在数组

Answer 2

我接受它。
创建一个新数组并遍历它并输出键和值新阵列将是一个更简单的多维数组＆＃34;。

$css = array(
    '.item-image|text-align' => 'center',
    '.item-image|vertical-align' => 'middle',
    '.item-image img.single_image|width' => '300px'
);

$new = array();

Foreach($css as $key => $val){
    $parts = explode("|", $key);
    If(!isset($new[$parts[0]])) $new[$parts[0]] = array();

    $new[$parts[0]][$parts[1]] = $val;
}

//Var_dump($new);

Foreach($new as $key => $subarray){
    Echo $key ."{\n";
    Foreach($subarray as $key2 => $val){
        Echo $key2 . ": " .$val .";\n";
    }
    Echo "}\n";
}

https://3v4l.org/niLPi

Answer 3

有很多方法可以解决这个问题：使用for，foreach，while或数组函数，它可能会增长到包含多维数组或更多内容。

您之前的答案已经有for和foreach答案，而且while几乎相同。

因此，我将使用array_walk

为您提供更高级的解决方案

$css = array(
    '.item-image|text-align' => 'center',
    '.item-image|vertical-align' => 'middle',
    '.item-image img.single_image|width' => '300px'
);
$cssFinal = '';
array_walk($css, function($value, $key) use (&$cssFinal) {
    $key = explode('|', $key);
    $cssFinal .= array_key_exists(0, $key) && array_key_exists(1, $key) ? $key[0].'{'.$key[1].':'.$value.';};'."\r\n" : ''; 
});
file_put_contents('your.css', $cssFinal);

请注意，我们验证密钥是否存在0和1，否则它不会显示任何内容。

我们在字符串末尾为文件和浏览器添加一个断行，当然如果你想将它写入文件

它将用你的css写一个文件：

.item-image{text-align:center;};
.item-image{vertical-align:middle;};
.item-image img.single_image{width:300px;};

从ARRAY生成CSS

3 个答案: