blocks|key|1290131|text|您可以结合使用calc()和var()来模拟条件句：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1290132|:root+{
--var-eq-two:+0;
}

.var-eq-two+{
++++--var-eq-two:+1;
}

.block+{
++++background-position:+calc(
++++++++150px+*+var(--var-eq-two)+%2B
++++++++4px+*+(1+-+var(--var-eq-two))
++++)+8px;
}|code-block|syntax|javascript|1290133|concept|1290134|entityMap|0|LINK|mutability|MUTABLE|url|http://kizu.ru/en/fun/conditions-for-css-variables/^0|7|6|E|5|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>You can use <code>calc()</code> in combination with <code>var()</code> to sort of mimic conditionals:</p>

<pre><code>:root {
--var-eq-two: 0;
}

.var-eq-two {
    --var-eq-two: 1;
}

.block {
    background-position: calc(
        150px * var(--var-eq-two) +
        4px * (1 - var(--var-eq-two))
    ) 8px;
}
</code></pre>

<p><a href="http://kizu.ru/en/fun/conditions-for-css-variables/" rel="noreferrer">concept</a></p>


blocks|key|1504400|text|您可以创建两个单独的样式表，并根据比较结果包含其中一个样式表|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504401|在其中一个你可以放入|1504402|background-position+:+150px+8px;|code-block|syntax|javascript|1504403|在另一个中|1504404|background-position+:+4px+8px;|1504405|我认为在CSS中唯一可以执行的检查是浏览器识别：|1504406|Conditional-CSS|offset|length|1504407|entityMap|0|LINK|mutability|MUTABLE|url|http://conditional-css.com/usage^0|0|0|0|0|0|0|0|F|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>You could create two separate stylesheets and include one of them based on the comparison result</p>

<p>In one of the you can put</p>

<pre><code>background-position : 150px 8px;
</code></pre>

<p>In the other one</p>

<pre><code>background-position : 4px 8px;
</code></pre>

<p>I think that the only check you can perform in CSS is browser recognition:</p>

<p><a href="http://conditional-css.com/usage" rel="noreferrer">Conditional-CSS</a></p>


blocks|key|1504596|text|您可以使用not代替if+like|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504597|.Container+*:not(a)
{
++++color:+#fff;
}|code-block|syntax|javascript|1504598|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can use not instead of if like </p>

<pre><code>.Container *:not(a)
{
    color: #fff;
}
</code></pre>


blocks|key|1290064|text|CSS是一个设计得很好的范例，它的许多特性并没有得到很多的使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1290065|如果您所说的条件和变量指的是将某些值的更改分发到整个文档或某个元素的范围下的机制，那么如何做到这一点：|1290066|​|1290067|var+myVar+=+4;
document.body.className+=+(myVar+==+5+?+"active"+:+"normal");|code-block|syntax|javascript|1290068|body.active+.menuItem+{
++background-position+:+150px+8px;
++background-color:+black;
}
body.normal+.menuItem+{
++background-position+:+4px+8px;+
++background-color:+green;
}|1290069|<body>
<div+class="menuItem"></div>
</body>|1290070|1290071|这样，您就可以将变量的影响分布到整个CSS样式中。这与@amichai和@SeReGa的建议类似，但更具通用性。|1290072|另一个这样的技巧是在整个文档中分布一些活动项目的ID，例如在突出显示菜单时再次：(使用Freemarker语法)|1290073|1290074|var+chosenCategory+=+15;
document.body.className+=+"category"+%2B+chosenCategory;|1290075|<#list+categories+as+cat+>
++++body.category${cat.id}+.menuItem+{+font-weight:+bold;+}
</#list>|1290076|<body>
<div+class="menuItem"></div>
</body>|1290077|1290078|当然，这只适用于有限的项目集，如类别或状态，而不是无限制的集合，如e-shop商品，否则生成的CSS会太大。但它在生成静态脱机文档时特别方便。|1290079|将CSS与生成平台结合使用来实现“条件”的另一个技巧是：|1290080|1290081|.myList+{
+++/*+Default+list+formatting+*/
}
.myList.count0+{
+++/*+Hide+the+list+when+there+is+no+item.+*/
+++display:+none;
}
.myList.count1+{
+++/*+Special+treatment+if+there+is+just+1+item+*/
+++color:+gray;
}|1290082|<ul+class="myList+count${items.size()}">

<li>Something...</div>
</ul>|1290083|1290084|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1F|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1G|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|1H|8|@]|9|@]|A|$I|J]]|$1|M|3|N|5|H|7|1I|8|@]|9|@]|A|$I|J]]|$1|O|3|E|5|6|7|1J|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1K|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1L|8|@]|9|@]|A|$]]|$1|T|3|E|5|6|7|1M|8|@]|9|@]|A|$]]|$1|U|3|V|5|H|7|1N|8|@]|9|@]|A|$I|J]]|$1|W|3|X|5|H|7|1O|8|@]|9|@]|A|$I|J]]|$1|Y|3|Z|5|H|7|1P|8|@]|9|@]|A|$I|J]]|$1|10|3|E|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1R|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|1S|8|@]|9|@]|A|$]]|$1|15|3|E|5|6|7|1T|8|@]|9|@]|A|$]]|$1|16|3|17|5|H|7|1U|8|@]|9|@]|A|$I|J]]|$1|18|3|19|5|H|7|1V|8|@]|9|@]|A|$I|J]]|$1|1A|3|E|5|6|7|1W|8|@]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]]|1C|$]]

<p>CSS is a nicely designed paradigm, and many of it's features are not much used.</p>

<p>If by a condition and variable you mean a mechanism to distribute a change of some value to the whole document, or under a scope of some element, then this is how to do it:</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 myVar = 4;
document.body.className = (myVar == 5 ? "active" : "normal");</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body.active .menuItem {
  background-position : 150px 8px;
  background-color: black;
}
body.normal .menuItem {
  background-position : 4px 8px; 
  background-color: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
&lt;div class="menuItem"&gt;&lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>This way, you distribute the impact of the variable throughout the CSS styles.
This is similar to what @amichai and @SeReGa propose, but more versatile.</p>

<p>Another such trick is to distribute the ID of some active item throughout the document, e.g. again when highlighting a menu:  (Freemarker syntax used)</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 chosenCategory = 15;
document.body.className = "category" + chosenCategory;</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;#list categories as cat &gt;
    body.category${cat.id} .menuItem { font-weight: bold; }
&lt;/#list&gt;</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
&lt;div class="menuItem"&gt;&lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>Sure,this is only practical with a limited set of items, like categories or states, and not unlimited sets like e-shop goods, otherwise the generated CSS would be too big. But it is especially convenient when generating static offline documents.</p>

<p>One more trick to do "conditions" with CSS in combination with the generating platform is this:</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>.myList {
   /* Default list formatting */
}
.myList.count0 {
   /* Hide the list when there is no item. */
   display: none;
}
.myList.count1 {
   /* Special treatment if there is just 1 item */
   color: gray;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="myList count${items.size()}"&gt;
&lt;!-- Iterate list's items here --&gt;
&lt;li&gt;Something...&lt;/div&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1289638|text|将服务器设置为将css文件解析为PHP，然后使用简单的PHP语句定义变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1289639|当然，这假设您使用的是PHP...|1289640|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>Set the server up to parse css files as PHP and  then define the variable variable with a simple PHP statement.</p>

<p>Of course this assumes you are using PHP...</p>


blocks|key|1289769|text|这是对上面Boldewyn答案的一点额外信息。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1289770|添加一些php代码来执行if/else|1289771|if($x==1){
++print+"<p+class=\"normal\">Text</p>\n";
}+else+{
++print+"<p+class=\"active\">Text</p>\n";
}|code-block|syntax|javascript|1289772|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This is a little extra info to the Boldewyn answer above.</p>

<p>Add some php code to do the if/else</p>

<pre><code>if($x==1){
  print "&lt;p class=\"normal\"&gt;Text&lt;/p&gt;\n";
} else {
  print "&lt;p class=\"active\"&gt;Text&lt;/p&gt;\n";
}
</code></pre>


blocks|key|1504218|text|据我所知，css中没有if/then/else。或者，您可以使用javascript函数来更改元素的背景位置属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504219|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>As far as i know, there is no if/then/else in css. Alternatively, you can use javascript function to alter the background-position property of an element.</p>


blocks|key|1289868|text|还有另一种选择(基于是否希望动态计算if语句)是使用C预处理器，如here所述。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1289869|entityMap|0|LINK|mutability|MUTABLE|url|http://uwstopia.nl/blog/2007/12/a-simple-preprocessor-for-css-files^0|X|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Yet another option (based on whether you want that if statement to be dynamically evaluated or not) is to use the C preprocessor, as described <a href="http://uwstopia.nl/blog/2007/12/a-simple-preprocessor-for-css-files" rel="nofollow noreferrer">here</a>.</p>


blocks|key|1504632|text|您可以为所有条件范围添加容器div。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1504633|将条件值作为类添加到容器div中。(您可以通过服务器端编程进行设置-+php/asp...)|1504634|
<div+class="true-value">
+++
+++<p>my+content</p>
+++<p>my+content</p>
+++<p>my+content</p>
</div>|code-block|syntax|javascript|1504635|现在，您可以使用嵌套选择器将container类用作div中所有元素的全局变量，而无需向每个元素添加类。|1504636|.true-value+p{
+++background-color:green;
}
.false-value+p{
+++background-color:red;
}|1504637|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You can add container div for all your condition scope.</p>

<p>Add the condition value as a class to the container div. (you can set it by server side programming - php/asp...)</p>

<pre><code>&lt;!--container div--&gt;
&lt;div class="true-value"&gt;
   &lt;!-- your content --&gt;
   &lt;p&gt;my content&lt;/p&gt;
   &lt;p&gt;my content&lt;/p&gt;
   &lt;p&gt;my content&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>Now you can use the container class as a global variable for all elements in the div using a nested selector, without adding the class to each element.</p>

<pre><code>.true-value p{
   background-color:green;
}
.false-value p{
   background-color:red;
}
</code></pre>


blocks|key|1289968|text|如果您愿意使用jquery，则可以在html中使用javascript设置条件语句：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1289969|$('.class').css("color",((Variable+>+0)+?+"#009933":"#000"));|code-block|syntax|javascript|1289970|如果变量的值大于0，则会将.class的文本颜色更改为绿色。|offset|length|style|CODE|1289971|entityMap^0|0|0|8|1|D|6|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>If you're open to using jquery, you can set conditional statements using javascript within the html:</p>

<pre><code>$('.class').css("color",((Variable &gt; 0) ? "#009933":"#000"));
</code></pre>

<p>This will change the text color of <code>.class</code> to green if the value of Variable is greater than <code>0</code>.</p>


<p>I would like to use conditions in my CSS.</p>

<p>The idea is that I have a variable that I replace when the site is run to generate the right style-sheet.</p>

<p>I want it so that according to this variable the style-sheet changes!</p>

<p>It looks like:</p>

<pre><code>[if {var} eq 2 ]
    background-position : 150px 8px;
[else]
    background-position : 4px 8px; 
</code></pre>

<p>Can this be done? How do you do this?</p>


Can you use if/else conditions in CSS?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我想在我的CSS中使用条件。这个想法是，我有一个变量，当站点运行时，我会替换它来生成正确的样式表。我希望它能根据这个变量改变样式表！看起来是这样的：[if {var} eq 2 ]    background-position : 150px 8px;[else]    background-position : 4px 8px; 这可以做到吗？您如何做到这一点？

问你能在CSS中使用if/else条件吗？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问你能在CSS中使用if/else条件吗？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问你能在CSS中使用if/else条件吗？
EN