html节点的多个css规则_Html_Css_Attributes

html节点的多个css规则

html css

html节点的多个css规则,html,css,attributes,Html,Css,Attributes,有人可以帮助我使用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: 500

有人可以帮助我使用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>


测试文本
.Css\u规则\u红色{
颜色：红色；
}
.Css\u规则\u大小{
字体大小：500px；
}

这是我目前的代码：

<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='css'规则\U红色']{
颜色：红色；
}
[数据自定义css='css\规则\大小']{
字体大小：500px；
}

'Css\u Rule\u red'

和

'Css\u Rule\u size'

都可以单独工作，但是，当组合在一起时，上面的代码既不显示

'Css\u Rule\u red'

也不显示

'Css\u Rule\u size'

Css规则

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

您可能希望这样：

    .Css_Rule_red {
        color: red;
    font-size: 500px;
    }

因为

data custom css

是一个独立于

class

的标记，您应该使用

[data custom css='css\u Rule\u red css\u Rule\u size']

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


[数据自定义css='css\U规则\U红色css\U规则\U大小']
{
颜色：红色；
字体大小：500px；
}

或


测试文本
[数据自定义css='css'规则\U红色']{
颜色：红色；
}
[data-custom-css2='Css'规则大小']{
字体大小：500px；
}

有关属性选择器的详细信息-

您必须为每个数据条目使用不同的数据属性。对于数据属性，它与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>


测试文本
[数据自定义css颜色='css'规则\U红色']{
颜色：红色；
}
[数据自定义css大小='css\u规则\u大小']{
字体大小：500px；
}

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

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

<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>