คำถามติดแท็ก css-selectors

มีบางอย่างเช่น! = (ไม่เท่ากัน) ใน CSS หรือไม่? เช่นฉันมีรหัสต่อไปนี้: input { ... ... } แต่สำหรับบางอินพุตฉันจำเป็นต้องโมฆะสิ่งนี้ ฉันต้องการทำเช่นนั้นโดยการเพิ่มคลาส "รีเซ็ต" ลงในแท็กอินพุตเช่น <input class="reset" ... /> จากนั้นก็ข้ามแท็กนี้จาก CSS ฉันจะทำเช่นนั้นได้อย่างไร? วิธีเดียวที่ฉันเห็นคือเพิ่มคลาสบางส่วนในแท็กอินพุตและเขียน CSS ใหม่ดังนี้: input.mod { ... ... }

116 html  css  css-selectors 

เป็นไปได้ไหมที่จะมีหลาย:beforeหลอกสำหรับองค์ประกอบเดียวกัน? .circle:before { content: "\25CF"; font-size: 19px; } .now:before{ content: "Now"; font-size: 19px; color: black; } ฉันพยายามใช้สไตล์ข้างต้นกับองค์ประกอบเดียวกันโดยใช้ jQuery แต่จะใช้เฉพาะรูปแบบล่าสุดเท่านั้นไม่เคยใช้ทั้งสองแบบ

116 css  css-selectors  pseudo-element  css-content 

มีตัวเลือก CSS เพื่อเลือกองค์ประกอบนี้ตามค่าแอตทริบิวต์สไตล์อินไลน์หรือไม่ <div style='display:block'>...</div> สิ่งที่ต้องการ div[cssAttribute=cssValue]

114 html  css  css-selectors  inline-styles 

ฉันมีโค้ด HTML ต่อไปนี้ในหน้า: <h4>Some text</h4> <p> Some more text! </p> ในของ.cssฉันฉันมีตัวเลือกต่อไปนี้เพื่อจัดรูปแบบh4องค์ประกอบ โค้ด HTML ด้านบนเป็นเพียงส่วนเล็ก ๆ ของโค้ดทั้งหมด มีอีกหลายdivอย่างที่ห่อหุ้มไว้เป็นของ shadowbox: #sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4 { color : #614E43; margin-top : 5px; margin-left : 6px; } ดังนั้นฉันจึงมีสไตล์ที่ถูกต้องสำหรับh4องค์ประกอบของฉันแต่ฉันก็ต้องการจัดสไตล์pแท็กใน HTML ของฉันด้วย เป็นไปได้ด้วย CSS-selectors หรือไม่? และถ้าใช่ฉันจะทำอย่างไร

114 html  css  css-selectors 

ฉันสังเกตเห็นว่าปุ่มและองค์ประกอบอื่น ๆ มีสไตล์เริ่มต้นและทำงานใน 3 ขั้นตอน ได้แก่ มุมมองปกติมุมมองโฮเวอร์ / โฟกัสและมุมมองแบบเลื่อนลง / คลิกใน CSS ฉันสามารถเปลี่ยนรูปแบบของมุมมองปกติและมุมมองโฮเวอร์ได้ดังนี้: button{ background:#333; color:#FFF; } button:hover{ background:#000; color:#EEE; } แต่ฉันจะเลือกมูสดาวน์ได้อย่างไร? ฉันต้องการสิ่งนี้: button:mousedown{ //some styling } ขอบคุณ

114 html  css  css-selectors 

ฉันมีปัญหาค่อนข้างใหญ่เพราะฉันต้องการกายวิภาคศาสตร์จากการจัดรูปแบบอินพุตบางประเภท ฉันมีสิ่งที่ชอบ: .registration_form_right input:not([type="radio") { //Nah. } แต่ฉันไม่ต้องการจัดรูปแบบช่องทำเครื่องหมายด้วย ฉันพยายามแล้ว: .registration_form_right input:not([type="radio" && type="checkbox"]) .registration_form_right input:not([type="radio" && "checkbox"]) .registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"]) ใช้&&อย่างไร? และฉันจะต้องใช้||เร็ว ๆ นี้และฉันคิดว่าการใช้งานจะเหมือนเดิม ปรับปรุง: ผมก็ยังไม่ทราบวิธีการใช้||และ&&ถูกต้อง ฉันไม่พบสิ่งใดในเอกสาร W3

114 css  css-selectors  conditional-operator 

class='myTestClass'ฉันมีองค์ประกอบที่มี ฉันจะใช้สไตล์ css กับลูก ๆ ทั้งหมดขององค์ประกอบนี้ได้อย่างไร ฉันต้องการใช้สไตล์นี้กับองค์ประกอบที่เด็ก ๆ เท่านั้น ไม่ใช่ลูกหลานของมัน ฉันสามารถใช้ .myTestClass > div { margin: 0 20px; } ซึ่งเหมาะกับdivเด็ก ๆทุกคน แต่ฉันต้องการวิธีแก้ปัญหาที่เหมาะกับเด็กทุกคน ฉันคิดว่าฉันสามารถใช้ได้*แต่ .myTestClass > * { margin: 0 20px; } ไม่ทำงาน, ไม่เป็นผล. แก้ไข .myTestClass > *เลือกไม่ใช้กฎใน Firefox 26 และไม่มีกฎอื่น ๆ สำหรับอัตรากำไรตามวางเพลิง และจะได้ผลถ้าฉันแทนที่*ด้วยdiv.

113 css  css-selectors 

จะมีการให้ LESS ใช้ตัวเลือกลูกทันที (>) ในผลลัพธ์หรือไม่? ในสไตล์ของฉันฉันต้องการเขียนสิ่งที่ชอบ: .panel { ... > .control { ... } } และมี LESS สร้างสิ่งที่ต้องการ: .panel > .control { ... }

112 css  css-selectors  less 

ฉันพบตัวเลือก CSS ต่อไปนี้ในสไตล์ชีตตัวแทนผู้ใช้ของ Google Chrome: [type="checkbox" i] อะไรiหมายถึง?

112 css  css-selectors 

ตำแหน่ง: เหนียวใช้งานได้กับเบราว์เซอร์มือถือบางรุ่นในขณะนี้ดังนั้นคุณสามารถเลื่อนแถบเมนูไปพร้อมกับหน้าได้ แต่จะติดอยู่ที่ด้านบนของวิวพอร์ตเมื่อใดก็ตามที่ผู้ใช้เลื่อนผ่าน แต่จะเกิดอะไรขึ้นถ้าคุณต้องการปรับสไตล์แถบเมนูเหนียวของคุณเล็กน้อยเมื่อใดก็ตามที่ 'ติด' อยู่? เช่นคุณอาจต้องการให้แถบมีมุมโค้งมนเมื่อใดก็ตามที่เลื่อนไปพร้อมกับหน้า แต่ทันทีที่มันเกาะอยู่ที่ด้านบนสุดของวิวพอร์ตคุณจะต้องกำจัดมุมที่โค้งมนด้านบนออกและเพิ่มเงาเล็กน้อยด้านล่าง มัน. มี pseudoselector ชนิดใด (เช่น::stuck) เพื่อกำหนดเป้าหมายองค์ประกอบที่มีposition: sticky และกำลังเกาะอยู่หรือไม่? หรือผู้ขายเบราว์เซอร์มีอะไรเช่นนี้ในท่อหรือไม่? ถ้าไม่ฉันจะขอได้ที่ไหน NB. โซลูชัน javascript ไม่ดีสำหรับสิ่งนี้เนื่องจากบนมือถือคุณมักจะได้รับscrollเหตุการณ์เดียวเมื่อผู้ใช้ปล่อยนิ้วดังนั้น JS จึงไม่สามารถทราบช่วงเวลาที่แน่นอนที่เกณฑ์การเลื่อนผ่าน

111 css  css-selectors  css-position 

เนื่องจาก IE7 และ IE8 ไม่รองรับสัญกรณ์ double-colon สำหรับองค์ประกอบหลอก (เช่น::afterหรือ::first-letter) และเนื่องจากเบราว์เซอร์รุ่นใหม่รองรับสัญกรณ์ single-colon (เช่น:after) เพื่อความเข้ากันได้แบบย้อนกลับฉันควรใช้สัญกรณ์ single-colon แต่เพียงผู้เดียวและเมื่อ ส่วนแบ่งการตลาดของ IE8 ลดลงสู่ระดับเล็กน้อยย้อนกลับไปและค้นหา / แทนที่ในฐานรหัสของฉัน? หรือฉันควรใส่ทั้งสองอย่าง: .foo:after, .foo::after { /*styles*/ } การใช้ double alone นั้นดูไร้สาระถ้าฉันสนใจผู้ใช้ IE8 (ผู้น่าสงสาร)

108 css  internet-explorer-8  css-selectors  internet-explorer-7  pseudo-element 

ฉันรู้ว่ามี:checkedคลาสหลอกCSS3 อย่างเป็นทางการแต่มี:uncheckedคลาสหลอกและพวกเขารองรับเบราว์เซอร์เดียวกันหรือไม่ การอ้างอิงของ Sitepointไม่ได้กล่าวถึงอย่างใดอย่างหนึ่งอย่างไรก็ตามข้อมูลจำเพาะ whatwgนี้(อะไรก็ได้) ทำ ฉันรู้ว่าผลลัพธ์เดียวกันนี้สามารถทำได้เมื่อรวมคลาสหลอก:checkedและ:not()คลาสหลอก แต่ฉันยังอยากรู้อยากเห็น: input[type="checkbox"]:not(:checked) { /* styles */ } แก้ไข: w3c แนะนำเทคนิคเดียวกัน คุณสามารถเลือกช่องทำเครื่องหมายที่ไม่ได้ทำเครื่องหมายโดยใช้คลาสหลอกเทียม: :not(:checked)

108 css  css-selectors  pseudo-class 

ตัวเลือกทั้งสองนี้แตกต่างกันอย่างไร .classA.classB { border: 1px solid; } .classA .classB { border: 1px solid; }

108 css  css-selectors 

เป้าหมายของฉันคือการใช้ CSS ในช่วงสุดท้ายliแต่มันไม่เป็นเช่นนั้น #refundReasonMenu #nav li:last-child { border-bottom: 1px solid #b5b5b5; } <div id="refundReasonMenu"> <ul id="nav"> <li><a id="abc" href="#">abcde</a></li> <li><a id="def" href="#">xyz</a></li> </ul> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ฉันจะเลือกเฉพาะลูกคนสุดท้ายได้อย่างไร?

106 css  css-selectors 

มีวิธีใดบ้างที่ CSS จะกำหนดเป้าหมายอินพุตทั้งหมดตามประเภท ฉันมีคลาสปิดการใช้งานที่ฉันใช้กับองค์ประกอบฟอร์มที่ปิดใช้งานต่างๆและฉันกำลังตั้งค่าสีพื้นหลังสำหรับกล่องข้อความ แต่ฉันไม่ต้องการให้ช่องทำเครื่องหมายของฉันได้รับสีนั้น ฉันรู้ว่าฉันสามารถทำได้โดยแยกชั้นเรียน แต่ฉันควรใช้ CSS ถ้าเป็นไปได้ ฉันแน่ใจว่าฉันสามารถตั้งค่านี้ใน javascript ได้ แต่กำลังมองหา CSS อีกครั้ง ฉันกำหนดเป้าหมาย IE7 + ฉันไม่คิดว่าฉันจะใช้ CSS3 ได้ แก้ไข ด้วย CSS3 ฉันจะทำอะไรได้บ้าง? INPUT[type='text']:disabled นั่นจะเป็นการดีกว่าที่จะกำจัดชั้นเรียนของฉันโดยสิ้นเชิง ... แก้ไข โอเคขอบคุณสำหรับความช่วยเหลือ! นี่คือตัวเลือกที่แก้ไขกล่องข้อความและพื้นที่ทั้งหมดที่ถูกปิดใช้งานโดยไม่ต้องตั้งค่าคลาสใด ๆ เมื่อฉันเริ่มคำถามนี้ฉันไม่เคยคิดว่ามันจะเป็นไปได้ ... INPUT[disabled][type='text'], TEXTAREA[disabled] { background-color: Silver; } ใช้งานได้ใน IE7

106 css  internet-explorer  css-selectors