Question

我有以下HTML代码

<textarea name="mytextarea" id="mytextarea" rows="10" cols="50">
color:red;
.yellow {
 color : yellow;
}
</textarea><br/>
<button id="mybutton">Parse</button><br/>
Content parsed : <br/>
<p id="parsedContent"></p>
<table>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>Ya</td>
            <td class="yellow">Hey</td>
            <td>Ho</td>
        </tr>
        <tr>
            <th>2</th>
            <td>11</td>
            <td>100</td>
            <td>27</td>
        </tr>
        <tr>
            <th>3</th>
            <td>sadd</td>
            <td>zaa</td>
            <td>ddd</td>
        </tr>
    </tbody>
</table>

这用于通过用户输入生成一些css，并动态地将生成的css插入到文档的头部。我使用下面的javascript代码用lesscss解析器生成css：

$('#mybutton').on('click',function(){
    content = 'table tbody {'+$('#mytextarea').val()+'}';

    var parser = new(less.Parser);
    parser.parse(content, function (err, tree) {
        if (!err) {
            if($('#headCss').length===0){
                $('head').append('<style id="headCss"></style>');
            }
            css = tree.toCSS();
            console.log(tree);
            $('#headCss').text(css);
            $('#parsedContent').text(css);
        }else{
            $('#parsedContent').text(err);
        }
    });
});
$('#mybutton').click();

我需要将生成的css应用于表，但不应将其应用于表头（列和行）。有没有办法在textarea上使用纯css（而不是更少）。

这里有一个代码为http://jsfiddle.net/Jiwoks/Lkz0mhor/的jsfiddle 在这个例子中，我不希望行标题为红色，只有td元素。

任何帮助非常感谢

Answer 1

您可以将此代码放在js中。我刚刚注意到您使用<th>作为标题，因此不需要:not(:first-child)。

content = 'table tbody td {'+$('#mytextarea').val()+'}';

在JS。

现在，此代码选择td s，这会阻止.yellow类产生任何影响，因为它会在td内找到.yellow类的元素而不是td本身。

你可以通过修改输入来解决这个问题：

color:red;
&.yellow {
 color : yellow;
}

但是，由于您只想在textarea输入中使用纯css，因此您可以在代码中修改它。例如，这一行：

content = content.replace(/^\./mg, '&.');

它用&.

替换行开头的所有点

http://jsfiddle.net/Lkz0mhor/3/

将较少生成的css应用于除th元素之外的所有html表

1 个答案: