將較少生成的CSS應用於除元素之外的所有html表

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（不少於）。

這是一個帶有代碼的jsfiddle： http : //jsfiddle.net/Jiwoks/Lkz0mhor/在這個示例中，我不希望行標頭是紅色的，而只是td元素。

任何幫助，不勝感激

Answer 1

您可以將此代碼放在js中。 我只是注意到您將<th>用作標題，所以:not(:first-child) 。

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

在JS中。

現在，此代碼選擇了td ，這可以防止.yellow類起作用，因為它在td使用.yellow類查找元素，而不是td本身。

您可以通過修改輸入來解決此問題：

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

但是，由於在textarea輸入中只需要純CSS，因此可以在代碼內修改它。 例如以下行：

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

它用＆替換行首的所有點&.

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