คุณสามารถใช้ if / else เงื่อนไขใน CSS ได้หรือไม่?

ฉันต้องการใช้เงื่อนไขใน CSS ของฉัน

ความคิดคือฉันมีตัวแปรที่ฉันแทนที่เมื่อไซต์ถูกเรียกใช้เพื่อสร้างสไตล์ชีตที่ถูกต้อง

ฉันต้องการให้ตามตัวแปรนี้สไตล์ชีตเปลี่ยนไป!

ดูเหมือนว่า:

[if {var} eq 2 ]
    background-position : 150px 8px;
[else]
    background-position : 4px 8px; 

สามารถทำได้หรือไม่? คุณจะทำอย่างไร?

ไม่ใช่ในความหมายดั้งเดิม แต่คุณสามารถใช้คลาสสำหรับสิ่งนี้ได้หากคุณสามารถเข้าถึง HTML ได้ พิจารณาสิ่งนี้:

<p class="normal">Text</p>

<p class="active">Text</p>

และในไฟล์ CSS ของคุณ:

p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}

นั่นคือวิธีการทำCSS

จากนั้นก็มี preprocessors CSS เช่นSass คุณสามารถใช้เงื่อนไขที่นั่นซึ่งจะมีลักษณะดังนี้:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

ข้อเสียคือคุณต้องประมวลผลสไตล์ชีตล่วงหน้าและเงื่อนไขจะได้รับการประเมินในเวลาคอมไพล์ไม่ใช่รันไทม์

คุณสมบัติที่ใหม่กว่าของ CSS ที่เหมาะสมคือคุณสมบัติที่กำหนดเอง (ตัวแปร CSS) พวกเขาจะได้รับการประเมินในขณะทำงาน (ในเบราว์เซอร์ที่รองรับ)

กับพวกเขาคุณสามารถทำบางสิ่งบางอย่างตามแนว:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

สุดท้ายคุณสามารถประมวลผลสไตล์ชีตของคุณล่วงหน้าด้วยภาษาฝั่งเซิร์ฟเวอร์ที่คุณชื่นชอบ หากคุณใช้ PHP ให้บริการstyle.css.phpไฟล์ที่มีลักษณะดังนี้:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

ในกรณีนี้คุณจะได้รับผลกระทบด้านประสิทธิภาพเนื่องจากการแคชสไตล์ชีตดังกล่าวจะทำได้ยาก

ด้านล่างนี้เป็นคำตอบเก่าของฉันซึ่งยังใช้ได้ แต่ฉันมีแนวทางที่ให้ความเห็นมากขึ้นในวันนี้:

สาเหตุหนึ่งที่ CSS ห่วยมากคือมันไม่มีไวยากรณ์ตามเงื่อนไข CSS นั้นใช้ไม่ได้อย่างสมบูรณ์ในเว็บสแต็กสมัยใหม่ ใช้ SASS สักครู่แล้วคุณจะรู้ว่าทำไมฉันถึงพูดแบบนั้น SASS มีไวยากรณ์แบบมีเงื่อนไข ... และข้อดีอื่น ๆ อีกมากมายเหนือ CSS ดั้งเดิมด้วย

คำตอบเก่า (ยังใช้ได้):

ไม่สามารถทำได้ใน CSS โดยทั่วไป!

คุณมีเงื่อนไขของเบราว์เซอร์เช่น:

/*[if IE]*/ 
body {height:100%;} 
/*[endif]*/

แต่ไม่มีใครป้องกันไม่ให้คุณใช้ Javascript เพื่อแก้ไข DOM หรือกำหนดคลาสแบบไดนามิกหรือแม้แต่การเชื่อมต่อรูปแบบในภาษาการเขียนโปรแกรมของคุณตามลำดับ

บางครั้งฉันส่งคลาส css เป็นสตริงไปยังมุมมองและสะท้อนลงในโค้ดเช่นนั้น (php):

<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>

คุณสามารถใช้calc()ร่วมกับvar()เพื่อเลียนแบบเงื่อนไข:

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

แนวคิด

คุณสามารถสร้างสไตล์ชีตสองแบบแยกกันและรวมหนึ่งในนั้นตามผลการเปรียบเทียบ

หนึ่งในนั้นคุณสามารถใส่

background-position : 150px 8px;

ในอีกรูปแบบหนึ่ง

background-position : 4px 8px;

ฉันคิดว่าการตรวจสอบเดียวที่คุณสามารถทำได้ใน CSS คือการจดจำเบราว์เซอร์:

เงื่อนไข-CSS

ฉันแปลกใจที่ไม่มีใครพูดถึงคลาสหลอก CSS ซึ่งเป็นการจัดเรียงเงื่อนไขใน CSS ด้วย คุณสามารถทำสิ่งขั้นสูงได้ด้วยสิ่งนี้โดยไม่ต้องใช้ JavaScript เพียงบรรทัดเดียว

คลาสหลอกบางอย่าง:

• : active - องค์ประกอบถูกคลิกหรือไม่
• : checked - วิทยุ / checkbox / option ถูกเลือกไว้หรือไม่ (สิ่งนี้ช่วยให้สามารถจัดแต่งทรงผมตามเงื่อนไขโดยใช้ช่องทำเครื่องหมาย!)
• : empty - องค์ประกอบว่างเปล่า?
• : fullscreen - เอกสารอยู่ในโหมดเต็มหน้าจอหรือไม่?
• : focus - องค์ประกอบมีแป้นพิมพ์โฟกัสหรือไม่
• : focus-within - องค์ประกอบหรือส่วนย่อย ๆ มีแป้นพิมพ์โฟกัสหรือไม่
• : has ([selector]) - องค์ประกอบมีลูกที่ตรงกับ [selector] หรือไม่ (น่าเศร้าที่เบราว์เซอร์หลัก ๆ ไม่รองรับ)
• : hover - เมาส์วางเมาส์เหนือองค์ประกอบนี้หรือไม่
• : in-range /: out-of-range - ค่าอินพุตอยู่ระหว่าง / นอกขั้นต่ำและขีด จำกัด สูงสุดหรือไม่?
• : ไม่ถูกต้อง /: ถูกต้อง - องค์ประกอบแบบฟอร์มมีเนื้อหาที่ไม่ถูกต้อง / ถูกต้องหรือไม่?
• : link - นี่คือลิงค์ที่ไม่ได้เข้าชมใช่ไหม
• : not () - สลับตัวเลือก
• : target - องค์ประกอบนี้เป็นเป้าหมายของส่วนย่อย URL หรือไม่
• : เยี่ยมชม - ผู้ใช้เคยเยี่ยมชมลิงค์นี้มาก่อนหรือไม่?

ตัวอย่าง:

div { color: white; background: red }
input:checked + div { background: green }

<input type=checkbox>Click me!
<div>Red or green?</div>

ตั้งค่าเซิร์ฟเวอร์ให้แยกวิเคราะห์ไฟล์ css เป็น PHP จากนั้นกำหนดตัวแปรตัวแปรด้วยคำสั่ง PHP ง่ายๆ

แน่นอนว่านี่ถือว่าคุณใช้ PHP ...

คุณสามารถใช้ not แทนถ้าต้องการ

.Container *:not(a)
{
    color: #fff;
}

เท่าที่ฉันรู้ไม่มี if / then / else ใน css หรือคุณสามารถใช้ฟังก์ชัน javascript เพื่อเปลี่ยนคุณสมบัติตำแหน่งพื้นหลังขององค์ประกอบ

แต่ตัวเลือกอื่น (ขึ้นอยู่กับว่าคุณต้องการว่าถ้าคำสั่งให้มีการประเมินผลแบบไดนามิกหรือไม่) คือการใช้ preprocessor C ตามที่อธิบายไว้ที่นี่

(ใช่กระทู้เก่า แต่มันกลับไปอยู่ด้านบนของการค้นหาของ Google ดังนั้นคนอื่นอาจสนใจเช่นกัน)

ฉันเดาว่า if / else-logic สามารถทำได้ด้วย javascript ซึ่งจะสามารถโหลด / ยกเลิกการโหลดสไตล์ชีตได้แบบไดนามิก ฉันยังไม่ได้ทดสอบสิ่งนี้ในเบราว์เซอร์ ฯลฯ แต่ควรใช้งานได้ สิ่งนี้จะช่วยให้คุณเริ่มต้น:

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

นี่เป็นข้อมูลเพิ่มเติมเล็กน้อยสำหรับคำตอบ Boldewyn ด้านบน

เพิ่มโค้ด php เพื่อทำ if / else

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

คุณสามารถเพิ่มคอนเทนเนอร์ div สำหรับขอบเขตเงื่อนไขทั้งหมดของคุณ

เพิ่มค่าเงื่อนไขเป็นคลาสในคอนเทนเนอร์ div (คุณสามารถตั้งค่าได้โดยการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์ - php / asp ... )

<!--container div-->
<div class="true-value">
   <!-- your content -->
   <p>my content</p>
   <p>my content</p>
   <p>my content</p>
</div>

ตอนนี้คุณสามารถใช้คลาสคอนเทนเนอร์เป็นตัวแปรส่วนกลางสำหรับองค์ประกอบทั้งหมดใน div โดยใช้ตัวเลือกที่ซ้อนกันโดยไม่ต้องเพิ่มคลาสให้กับแต่ละองค์ประกอบ

.true-value p{
   background-color:green;
}
.false-value p{
   background-color:red;
}

คุณสามารถใช้จาวาสคริปต์เพื่อจุดประสงค์นี้ด้วยวิธีนี้:

1. ก่อนอื่นคุณตั้งค่า CSS สำหรับคลาส "ปกติ" และสำหรับคลาส "แอ็คทีฟ"
2. จากนั้นคุณให้รหัส 'MyElement' แก่องค์ประกอบของคุณ
3. และตอนนี้คุณสร้างเงื่อนไขของคุณใน JavaScript เช่นตัวอย่างด้านล่าง ... (คุณสามารถเรียกใช้เปลี่ยนค่าของ myVar เป็น 5 และคุณจะเห็นว่ามันทำงานอย่างไร)

var myVar = 4;

if(myVar == 5){
  document.getElementById("MyElement").className = "active";
}
else{
  document.getElementById("MyElement").className = "normal";
}

.active{
  background-position : 150px 8px;
  background-color: black;
}
.normal{
  background-position : 4px 8px; 
  background-color: green;
}
div{
  width: 100px;
  height: 100px;
  }

<div id="MyElement">
  
  </div>

CSS เป็นกระบวนทัศน์ที่ได้รับการออกแบบมาอย่างดีและมีการใช้คุณลักษณะหลายอย่างไม่มากนัก

หากโดยเงื่อนไขและตัวแปรคุณหมายถึงกลไกในการกระจายการเปลี่ยนแปลงของค่าบางอย่างไปยังเอกสารทั้งหมดหรือภายใต้ขอบเขตขององค์ประกอบบางส่วนนี่คือวิธีการ:

var myVar = 4;
document.body.className = (myVar == 5 ? "active" : "normal");

body.active .menuItem {
  background-position : 150px 8px;
  background-color: black;
}
body.normal .menuItem {
  background-position : 4px 8px; 
  background-color: green;
}

<body>
<div class="menuItem"></div>
</body>

ด้วยวิธีนี้คุณจะกระจายผลกระทบของตัวแปรไปทั่วทั้งสไตล์ CSS สิ่งนี้คล้ายกับสิ่งที่ @amichai และ @SeReGa เสนอ แต่มีความหลากหลายมากกว่า

เคล็ดลับอีกประการหนึ่งคือการแจกจ่าย ID ของรายการที่ใช้งานอยู่ทั่วทั้งเอกสารเช่นอีกครั้งเมื่อไฮไลต์เมนู: (ใช้ไวยากรณ์ Freemarker)

var chosenCategory = 15;
document.body.className = "category" + chosenCategory;

<#list categories as cat >
    body.category${cat.id} .menuItem { font-weight: bold; }
</#list>

<body>
<div class="menuItem"></div>
</body>

แน่นอนว่าสิ่งนี้ใช้ได้กับชุดรายการที่ จำกัด เท่านั้นเช่นหมวดหมู่หรือรัฐและไม่ใช่ชุดไม่ จำกัด เช่นสินค้าในร้านค้าออนไลน์มิฉะนั้น CSS ที่สร้างขึ้นจะมีขนาดใหญ่เกินไป แต่จะสะดวกเป็นพิเศษเมื่อสร้างเอกสารออฟไลน์แบบคงที่

อีกหนึ่งเคล็ดลับในการทำ "เงื่อนไข" ด้วย CSS ร่วมกับแพลตฟอร์มการสร้างคือ:

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

<ul class="myList count${items.size()}">
<!-- Iterate list's items here -->
<li>Something...</div>
</ul>

หากคุณเปิดให้ใช้ jquery คุณสามารถตั้งค่าคำสั่งเงื่อนไขโดยใช้ javascript ภายใน html:

$('.class').css("color",((Variable > 0) ? "#009933":"#000"));

นี้จะเปลี่ยนสีของข้อความเป็นสีเขียวถ้าค่าของตัวแปรที่มีค่ามากกว่า.class0

เพียงทำสิ่งนี้ใน html โดยใช้ตัวดำเนินการ ternary ไม่ใช่ถ้าเป็นอย่างอื่น

class = "{{condition? 'class1': 'class2'}}"

หรือ

[ngClass] = "เงื่อนไข? 'class1': 'class2'"

คุณสามารถใช้ php ได้หากคุณเขียน css ในแท็ก

<style>
    section {
        position: fixed;
        top: <?php if ($test == $tset) { echo '10px' }; ?>;
    }
</style