Question

有人可以帮助我使用css语法为具有数据属性的html节点提供多个css规则。

以下是一些可行的代码：

<html>
<head>
</head>
<div class='Css_Rule_red Css_Rule_size'>
    Test text
</div>

<style>.Css_Rule_red {
    color: red;
}
.Css_Rule_size {
    font-size: 500px;
}
</style>
</html>

这是我目前的代码：

<html>
<head>
</head>
<div data-custom-css='Css_Rule_red Css_Rule_size'>
    Test text
</div>

<style>[data-custom-css='Css_Rule_red'] {
    color: red;
}
[data-custom-css='Css_Rule_size'] {
    font-size: 500px;
}
</style>
</html>

'Css_Rule_red'和'Css_Rule_size'都可以单独使用，但上面的代码在组合在一起时不会显示'Css_Rule_red'或'Css_Rule_size' css规则。

使用数据属性时，如何使用多个css规则？

Answer 1

https://amcss.github.io/

有关属性选择器的更多信息 - https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

[data-custom-css~="Css_Rule_red"] {
  color: red;
}

[data-custom-css~="Css_Rule_size"] {
  font-size: 500px;
}

Answer 2

你可能想要这样的东西：

var currentValue = 0; //Global
for (var itemobject in value){
    record.selectNewLineItem('item');
    var lineitemobject = value[itemobject];
    for(var lineitemfieldname in lineitemobject){
        var lineitemfieldvalue = lineitemobject[lineitemfieldname];
        if(lineitemfieldname == 'ReplacementCount'){
            if(lineitemfieldvalue != 0){
                lineitemfieldname = 'quantity';
                currentValue = lineitemfieldvalue;
            }
            delete 'ServiceCount';
        }   
        else if (lineitemfieldname == 'ServiceCount'){
            if(lineitemfieldvalue != 0){
                lineitemfieldname = 'quantity';
                currentValue = lineitemfieldvalue;
            }
            delete 'ReplacementCount';
        }
        if(lineitemfieldname == 'InventoryManagementKey'){
            lineitemfieldname = 'item';
        }
        record.setCurrentLineItemValue('item',lineitemfieldname,lineitemfieldvalue);
        record.setCurrentLineItemValue('item','price','9')
    }
    record.commitLineItem('item');
}

Answer 3

由于data-custom-css是与class不同的标记，因此您应使用[data-custom-css='Css_Rule_red Css_Rule_size'] ..

<style>
[data-custom-css='Css_Rule_red Css_Rule_size']
{
    color: red;
    font-size: 500px;
}
</style>

或

<div data-custom-css='Css_Rule_red' data-custom-css2='Css_Rule_size'>
    Test text
</div>

<style>[data-custom-css='Css_Rule_red'] {
    color: red;
}
[data-custom-css2='Css_Rule_size'] {
    font-size: 500px;
}
</style>

Answer 4

您必须为每个数据条目使用不同的数据属性。对于数据属性，它与ID相同。如果你使用多个，它们都不会起作用。如果您希望将这两个类作为数据属性，则可以将它们设置为

<html>
<head>
</head>
<div data-custom-css-colour='Css_Rule_red' data-custom-css-size='Css_Rule_size'>
    Test text
</div>

<style>
  [data-custom-css-colour='Css_Rule_red'] {
    color: red;
  }
  [data-custom-css-size='Css_Rule_size'] {
    font-size: 500px;
  }
</style>
</html>

html节点的多个css规则

4 个答案: