html - 一个html节点的多个css规则

标签 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: 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 规则?

最佳答案

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

关于html - 一个html节点的多个css规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32694016/

相关文章:

javascript - 添加 jQuery 验证

javascript - 如何在我的客户应用程序中实现桌面通知?

html - 使用 CSS 使开关切换更暗

javascript - 如何将图标和输入类型文本框分开并将div移动到右 Angular ?

java - Java中LocalDate属性的编译问题?

html - novalidate HTML 属性有什么作用?

html - 如何在 Shiny 忙碌并显示加载文本时禁用所有操作按钮

php - 如何在单选按钮单击事件上隐藏/显示输入框

css - 在 CSS 中包括重置边距/填充

C++ - 使用父类属性