blocks|key|1405856|text|您不能直接在CSS中计算值，也不能使用SASS/LESS来计算。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1405857|为了做到这一点，您必须使用Javascript。|1405858|这是完全有意义的，因为在CSS中计算html的部分，即使是可行的，也是可怕的做法。|1405859|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>You can not calculate the value directly in CSS, nor SASS/LESS.</p>

<p>You will have to use Javascript in order to do that.</p>

<p>Which makes total sense as calculating parts of html in CSS even if would be doable would be terrible practice.</p>


blocks|key|1405892|text|不能使用选择器中的属性选择器的值执行算术计算。属性值总是字符串，最多只支持子字符串匹配。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1405893|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>You cannot perform arithmetic calculations with the values of attribute selectors within a selector. Attribute values are always strings, and only support substring matching at best.</p>


blocks|key|1603188|text|有属性但是|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1603189|attr()函数可以与任何CSS属性一起使用，但对内容以外的属性的支持是实验性的。|blockquote|1603190|从理论上讲，你应该能够|1603191|div[data-color]+{
++++color:+attr(data-color,+'color');
}|code-block|syntax|javascript|1603192|但似乎没有什么能支持它。|1603193|我在想，也许您可以将其与卡尔克结合使用，但calc也不支持模块化，因此您无法使用CSS属性从pid中计算颜色。|style|CODE|1603194|我觉得你运气不好。您应该用任何模板语言来计算pid->颜色，而不是使用任何模板语言，这样做应该很容易。|1603195|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/CSS/attr|1|https://developer.mozilla.org/en/docs/Web/CSS/calc^0|1|2|0|0|0|0|0|0|L|4|C|3|1|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|F|7|19|8|@]|9|@]|C|$]]|$1|G|3|H|5|6|7|1A|8|@]|9|@]|C|$]]|$1|I|3|J|5|K|7|1B|8|@]|9|@]|C|$L|M]]|$1|N|3|O|5|6|7|1C|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1D|8|@$A|1E|B|1F|R|S]]|9|@$A|1G|B|1H|1|1I]]|C|$]]|$1|T|3|U|5|6|7|1J|8|@]|9|@]|C|$]]|$1|V|3|-4|5|6|7|1K|8|@]|9|@]|C|$]]]|W|$X|$5|Y|Z|10|C|$11|12]]|13|$5|Y|Z|10|C|$11|14]]]]

<p>There's <a href="https://developer.mozilla.org/en/docs/Web/CSS/attr" rel="nofollow noreferrer">attr</a> but</p>

<blockquote>
  <p>The attr() function can be used with any CSS property, but support for properties other than content is experimental.</p>
</blockquote>

<p>In theory, you should be able to do</p>

<pre><code>div[data-color] {
    color: attr(data-color, 'color');
}
</code></pre>

<p>But nothing seems to support it.</p>

<p>I was thinking maybe you could use that in conjunction with <a href="https://developer.mozilla.org/en/docs/Web/CSS/calc" rel="nofollow noreferrer">calc</a> but <code>calc</code> doesn't support modulo either, so there's really no way for you to calculate a color from a pid using CSS properties.</p>

<p>I think you're out of luck. You should do the calculation of pid->color in whatever template language you're using instead, should be just as easy to do.</p>


blocks|key|1603212|text|下面是一个简单的JavaScript解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1603213|​|1603214|var+pids+=+document.querySelectorAll('[data-pid]');

Array.prototype.forEach.call(pids,+function(elem,+index)+{
++++elem.classList.add('pid-mod-'+%2B+(index+%25+4));
});|code-block|syntax|javascript|1603215|.pid-mod-0+{
++color:+red;
}

.pid-mod-1+{
++color:+orange;
}

.pid-mod-2+{
++color:+yellow;
}

.pid-mod-3+{
++color:+green;
}|1603216|<div+data-pid="0">0</div>
<div+data-pid="1">1</div>
<div+data-pid="2">2</div>
<div+data-pid="3">3</div>
<div+data-pid="4">4</div>
<div+data-pid="5">5</div>
<div+data-pid="6">6</div>
<div+data-pid="7">7</div>|1603217|1603218|如果所有元素都是彼此的兄弟，那么可以使用:nth-of-type()或:nth-child()。|offset|length|style|CODE|1603219|1603220|div[data-pid]:nth-of-type(4n%2B1){
++color:+red;
}

div[data-pid]:nth-of-type(4n%2B2){
++color:+orange;
}

div[data-pid]:nth-of-type(4n%2B3){
++color:+yellow;
}

div[data-pid]:nth-of-type(4n%2B4){
++color:+green;
}|1603221|<div+class="only-pids-in-here">
++<div+data-pid="0">0</div>
++<div+data-pid="1">1</div>
++<div+data-pid="2">2</div>
++<div+data-pid="3">3</div>
++<div+data-pid="4">4</div>
++<div+data-pid="5">5</div>
++<div+data-pid="6">6</div>
++<div+data-pid="7">7</div>
</div>|1603222|1603223|entityMap^0|0|0|0|0|0|0|K|E|Z|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|17|8|@$P|18|Q|19|R|S]|$P|1A|Q|1B|R|S]]|9|@]|A|$]]|$1|T|3|C|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1D|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|Y|3|C|5|6|7|1F|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|10|$]]

<p>Here's a simple JavaScript solution:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var pids = document.querySelectorAll('[data-pid]');

Array.prototype.forEach.call(pids, function(elem, index) {
    elem.classList.add('pid-mod-' + (index % 4));
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.pid-mod-0 {
  color: red;
}

.pid-mod-1 {
  color: orange;
}

.pid-mod-2 {
  color: yellow;
}

.pid-mod-3 {
  color: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-pid="0"&gt;0&lt;/div&gt;
&lt;div data-pid="1"&gt;1&lt;/div&gt;
&lt;div data-pid="2"&gt;2&lt;/div&gt;
&lt;div data-pid="3"&gt;3&lt;/div&gt;
&lt;div data-pid="4"&gt;4&lt;/div&gt;
&lt;div data-pid="5"&gt;5&lt;/div&gt;
&lt;div data-pid="6"&gt;6&lt;/div&gt;
&lt;div data-pid="7"&gt;7&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<hr/>

<p>If all the elements are siblings of each other, then you can use <code>:nth-of-type()</code> or <code>:nth-child()</code> with a range.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div[data-pid]:nth-of-type(4n+1){
  color: red;
}

div[data-pid]:nth-of-type(4n+2){
  color: orange;
}

div[data-pid]:nth-of-type(4n+3){
  color: yellow;
}

div[data-pid]:nth-of-type(4n+4){
  color: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="only-pids-in-here"&gt;
  &lt;div data-pid="0"&gt;0&lt;/div&gt;
  &lt;div data-pid="1"&gt;1&lt;/div&gt;
  &lt;div data-pid="2"&gt;2&lt;/div&gt;
  &lt;div data-pid="3"&gt;3&lt;/div&gt;
  &lt;div data-pid="4"&gt;4&lt;/div&gt;
  &lt;div data-pid="5"&gt;5&lt;/div&gt;
  &lt;div data-pid="6"&gt;6&lt;/div&gt;
  &lt;div data-pid="7"&gt;7&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I just learned that I can select elements by using data-attributes, which is great. I then want to stylize these elements differently based on certain calcutions. for example, I want to have 4 varieties of style, and I want to use modulus of the existing  <code>[data-pid]</code> attribute of the elements to help determine the style.  </p>

<p>For example, imagine there are a set of divs containing text that has one of four font colors (e.g. red, orange, yellow, or green), and that an individual div's color depends on its modulus of four. I believe the CSS (if it is possible) would go something like this:</p>

<pre><code>div[0=data-pid-modulus-by-4]{
  color: red;
}

div[1=data-pid-modulus-by-4]{
  color: orange;
}

div[2=data-pid-modulus-by-4]{
  color: yellow;
}

div[3=data-pid-modulus-by-4]{
  color: green;
}
</code></pre>

<p>Is it possible to calculate the modulus of a data-pid/attribute using just CSS in a way similar to what I illustrate above or do I have to use javascript to accomplish this modulus of an attribute's value? If it is not possible can someone suggest the smallest/easiest js solution they can think of to do it?</p>

<p>Thanks!</p>


Performing calculations (calc) on data attributes in CSS (e.g. modulus)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我刚刚了解到，我可以使用数据属性来选择元素，这是很棒的。然后，我想根据特定的计算，对这些元素进行不同的样式化。例如，我希望有4种样式，我希望使用元素的现有[data-pid]属性的模数来帮助确定样式。例如，假设有一组div包含有四种字体颜色之一的文本(例如红色、橙色、黄色或绿色)，而单个div的颜色取决于其模数4。我相...

问对CSS中的数据属性(例如模数)执行计算(calc)
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对CSS中的数据属性(例如模数)执行计算(calc)EN