มี CSS ที่ไม่เท่ากับตัวเลือกหรือไม่?

มีบางอย่างเช่น! = (ไม่เท่ากัน) ใน CSS หรือไม่? เช่นฉันมีรหัสต่อไปนี้:

input {
 ... 
 ...
}

แต่สำหรับบางอินพุตฉันจำเป็นต้องโมฆะสิ่งนี้ ฉันต้องการทำเช่นนั้นโดยการเพิ่มคลาส "รีเซ็ต" ลงในแท็กอินพุตเช่น

<input class="reset" ... />

จากนั้นก็ข้ามแท็กนี้จาก CSS

ฉันจะทำเช่นนั้นได้อย่างไร?

วิธีเดียวที่ฉันเห็นคือเพิ่มคลาสบางส่วนในแท็กอินพุตและเขียน CSS ใหม่ดังนี้:

input.mod {
 ...
 ...
}

ใน CSS3 คุณสามารถใช้:not()ตัวกรองได้ แต่เบราว์เซอร์บางตัวยังไม่รองรับ CSS3 อย่างสมบูรณ์ดังนั้นคุณต้องรู้ว่าคุณกำลังทำอะไรอยู่ซึ่งตอนนี้ เบราว์เซอร์หลักทั้งหมดรองรับ (และมีมาระยะหนึ่งแล้วนี่เป็นคำตอบเก่า ๆ ... )

ตัวอย่าง:

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

และ CSS

input:not(.avoidme) { background-color: green; }

หมายเหตุ:วิธีแก้ปัญหานี้ไม่จำเป็นอีกต่อไป ฉันทิ้งไว้ที่นี่เพื่อดูบริบท

หากคุณไม่ต้องการใช้ CSS3 คุณสามารถตั้งค่าสไตล์ให้กับองค์ประกอบทั้งหมดจากนั้นตั้งค่าใหม่ด้วยคลาส

input { background-color: green; }
input.avoidme { background-color: white; }

คุณยังสามารถทำได้โดย "ย้อนกลับ" การเปลี่ยนแปลงในคลาสรีเซ็ตเฉพาะใน CSS

INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}

CSS3 มี:not()แต่ยังไม่ได้ใช้ในทุกเบราว์เซอร์ อย่างไรก็ตามมีการนำไปใช้ใน IE9 Platform Preview

input:not(.reset) { }

http://www.w3.org/TR/css3-selectors/#negation

ในระหว่างนี้คุณจะต้องยึดติดกับวิธีการที่ล้าสมัย

คุณสามารถเข้าใกล้สิ่งนี้ได้โดยกำหนดเป้าหมายแอตทริบิวต์เช่นนี้:

input:not([type=checkbox]){ width:100%; }

ในกรณีนี้อินพุตทั้งหมดที่ไม่ใช่ประเภท "ช่องทำเครื่องหมาย" จะมีความกว้าง 100%

น่าสนใจเพียงแค่ลองใช้สิ่งนี้เพื่อเลือกองค์ประกอบ DOM โดยใช้ JQuery และใช้งานได้! :)

$("input[class!='bad_class']");

หน้านี้มี 168 div ซึ่งไม่มีคลาส 'comment-copy'

$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168

แทนที่จะใช้ class = "reset" คุณสามารถย้อนตรรกะได้โดยมี class = "valid" คุณสามารถเพิ่มสิ่งนี้ตามค่าเริ่มต้นและลบคลาสเพื่อรีเซ็ตสไตล์

จากตัวอย่างของคุณและโทมัส

input.valid {
 ... 
 ...
}

และ

<input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>