การเขียนโปรแกรม css-selectors

2

ตัวเลือก CSS สำหรับลูกอื่นที่ไม่ใช่ลูกคนแรกและลูกคนสุดท้าย

ฉันกำลังสร้างเว็บไซต์ขั้นสูง คำถามของฉัน: เป็นไปได้ไหมที่จะเลือกเด็กคนอื่น ๆ ทั้งหมดยกเว้น:first-childและ:last-child? ฉันรู้ว่ามี:not()ตัวเลือก แต่ใช้ไม่ได้กับมากกว่าหนึ่งตัวที่ไม่ได้อยู่ในวงเล็บ นี่คือสิ่งที่ฉันมี: #navigation ul li:not(:first-child, :last-child) { background: url(images/UISegmentBarButtonmiddle@2x.png); background-size: contain; }

106 html css css-selectors

3

ตัวเลือก CSS ที่มีจุดใน ID

ข้อมูลจำเพาะ HTML อนุญาตให้มีจุด (.) ใน id: <img id="some.id" /> อย่างไรก็ตามการใช้กฎตัวเลือกรหัส CSS จะจับคู่ไม่ถูกต้อง: #some.id { color: #f00; } ข้อกำหนด CSS สำหรับID Selectorsไม่ได้กล่าวถึงกรณีนี้ ดังนั้นฉันคิดว่ามันใช้การรวมกันของชื่อแท็กและตัวเลือกคลาส ? ยกตัวอย่างเช่นกฎของ CSS a.classNameจะใช้กับแท็กสมอ ( <a>) ที่มีชื่อชั้นเช่นclassName<a class="className"></a> เป็นไปได้ไหมที่จะมีกฎไฟล์ CSS ภายนอกที่อ้างอิงองค์ประกอบ HTML โดย id ที่มีจุดอยู่ ฉันไม่คาดหวังเนื่องจาก CSS ระบุว่า " ตัวระบุ " CSS ไม่รวมจุดเป็นอักขระที่ถูกต้อง นี่เป็นความไม่ตรงกันพื้นฐานระหว่างข้อกำหนด HTML และ CSS หรือไม่? …

106 html css css-selectors

10

การเลือกอินพุตข้อความว่างโดยใช้ jQuery

ฉันจะระบุกล่องข้อความว่างโดยใช้ jQuery ได้อย่างไร ฉันต้องการทำโดยใช้ตัวเลือกถ้าเป็นไปได้ทั้งหมด นอกจากนี้ฉันต้องเลือกรหัสเนื่องจากในรหัสจริงที่ฉันต้องการใช้สิ่งนี้ฉันไม่ต้องการเลือกอินพุตข้อความทั้งหมด ในสองตัวอย่างโค้ดต่อไปนี้รหัสแรกแสดงค่าที่ผู้ใช้พิมพ์ลงในช่องข้อความ "txt2" อย่างถูกต้อง ตัวอย่างที่สองระบุว่ามีช่องข้อความว่างอยู่ แต่ถ้าคุณกรอกข้อมูลลงไปก็ยังถือว่าว่างอยู่ ทำไมถึงเป็นแบบนี้? สามารถทำได้โดยใช้เพียงแค่ตัวเลือกหรือไม่? รหัสนี้รายงานค่าใน textbox "txt2": <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#cmdSubmit').click(function() { alert($('[id=txt2]').val()); }); }); </script> </head> <body> <form> <input type="text" name="txt1" id="txt1" value="123" /><br /> <input type="text" name="txt2" id="txt2" value="" /><br /> <input type="text" name="txt3" …

104 jquery css-selectors

6

เหตุใด document.querySelectorAll จึงส่งคืน StaticNodeList แทนที่จะเป็น Array จริง

มันทำให้ฉันไม่สามารถทำได้document.querySelectorAll(...).map(...)แม้กระทั่งใน Firefox 3.6 และฉันก็ยังไม่สามารถหาคำตอบได้ดังนั้นฉันจึงคิดว่าฉันจะโพสต์ข้ามคำถามจากบล็อกนี้: http://blowery.org/2008/08/29/yay-for-queryselectorall-boo-for-staticnodelist/ มีใครรู้เหตุผลทางเทคนิคว่าทำไมคุณไม่ได้รับ Array? หรือทำไม StaticNodeList ไม่ได้รับมรดกจากอาร์เรย์ในลักษณะดังกล่าวที่คุณสามารถใช้map, concatetc? (BTW ถ้าเป็นเพียงฟังก์ชั่นเดียวที่คุณต้องการคุณสามารถทำบางอย่างเช่นNodeList.prototype.map = Array.prototype.map;... แต่อีกครั้งทำไมฟังก์ชันนี้ (โดยเจตนา?) ถูกบล็อกตั้งแต่แรก?)

103 javascript dom css-selectors

10

querySelector ค้นหาเด็กทันที

ฉันมีฟังก์ชั่นเหมือน jquery: function(elem) { return $('> someselector', elem); }; คำถามคือฉันจะทำเช่นเดียวกันกับquerySelector()? ปัญหาคือ>ตัวเลือกในquerySelector()ต้องระบุพาเรนต์อย่างชัดเจน มีวิธีแก้ปัญหาใด ๆ หรือไม่?

102 javascript css-selectors selectors-api

2

CSS Input Type Selectors - เป็นไปได้ที่จะมีไวยากรณ์“ หรือ” หรือ“ not”?

หากมีอยู่ในการเขียนโปรแกรม) หากฉันมีรูปแบบ HTML ที่มีอินพุตต่อไปนี้: <input type="text" /> <input type="password" /> <input type="checkbox" /> ฉันต้องการใช้สไตล์กับอินพุตทั้งหมดที่เป็นtype="text"หรือtype="password". type != "checkbox"หรือฉันจะชำระทั้งหมดของการป้อนข้อมูลที่ ดูเหมือนว่าฉันต้องทำสิ่งนี้: input[type='text'], input[type='password'] { // my css } ไม่มีวิธีทำ: input[type='text',type='password'] { // my css } หรือ input[type!='checkbox'] { // my css } ฉันมองไปรอบ ๆ และดูเหมือนว่าจะไม่มีวิธีทำสิ่งนี้ด้วยตัวเลือก CSS เดียว ไม่ใช่เรื่องใหญ่ แต่ฉันเป็นแค่แมวขี้สงสัย ความคิดใด ๆ ?

101 html css css-selectors

5

Sass รวมพาเรนต์โดยใช้เครื่องหมายและ (&) กับตัวเลือกประเภท

ฉันมีปัญหากับการทำรังใน Sass สมมติว่าฉันมี HTML ต่อไปนี้: <p href="#" class="item">Text</p> <p href="#" class="item">Text</p> <a href="#" class="item">Link</a> เมื่อฉันพยายามซ้อนสไตล์ของฉันในสิ่งต่อไปนี้ฉันได้รับข้อผิดพลาดในการคอมไพล์: .item { color: black; a& { color:blue; } } ฉันจะอ้างอิงตัวเลือกประเภทก่อนตัวเลือกหลักได้อย่างไรเมื่อเป็นส่วนหนึ่งขององค์ประกอบเดียวกัน

101 sass css-selectors

6

: ลูกคนแรกไม่ทำงานตามที่คาดไว้

ฉันพยายามที่จะเลือกเป็นครั้งแรกh1ภายในกับชั้นที่เรียกว่าdiv detail_containerใช้งานได้หากh1เป็นองค์ประกอบแรกภายในนี้divแต่ถ้ามาหลังจากนี้ulจะใช้ไม่ได้ <style type="text/css"> .detail_container h1:first-child { color:blue; } </style> </head> <body> <div class="detail_container"> <ul> <li></li> <li></li> </ul> <h1>First H1</h1> <h1>Second H1</h1> </div> </body> </html> ฉันรู้สึกว่า CSS ที่ฉันมีจะเลือกเป็นอันดับแรกh1ไม่ว่าจะอยู่ที่divใดก็ตาม ฉันจะทำให้มันทำงานได้อย่างไร?

100 css css-selectors

3

จะสร้างกฎ css สำหรับองค์ประกอบทั้งหมดยกเว้นคลาสเดียวได้อย่างไร

ฉันได้สร้าง CSS สไตล์ชีตสำหรับโครงการของฉันแล้ว มีวิธีใดบ้างที่ฉันสามารถสร้างกฎ css ที่ใช้กับองค์ประกอบตารางทั้งหมดยกเว้นองค์ประกอบตารางที่เป็นของคลาส "dojoxGrid" สิ่งที่ต้องการ: .not(dojoxGrid) table{ width:100%; border-top:1px solid #dddddd; border-left:1px solid #dddddd; border-right:1px solid #dddddd; margin:1em auto; border-collapse:collapse; }

100 css css-selectors

2

ตัวเลือกแอตทริบิวต์ CSS ไม่ทำงานกับ href

ฉันจำเป็นต้องใช้ตัวเลือกแอตทริบิวต์ใน css เพื่อเปลี่ยนลิงค์สีและรูปภาพที่แตกต่างกัน แต่มันใช้ไม่ได้ ฉันมี html นี้: <a href="/manual.pdf">A PDF File</a> และ css นี้: a { display: block; height: 25px; padding-left: 25px; color:#333; font: bold 15px Tahoma; text-decoration: none; } a[href='.pdf'] { background: red; } ทำไมพื้นหลังถึงไม่เป็นสีแดง

99 html css css-selectors

5

เครื่องหมายดอกจัน (*) ทำอะไรในตัวเลือก CSS

ฉันพบโค้ด CSS นี้และฉันรันมันเพื่อดูว่ามันทำอะไรและมันสรุปทุกองค์ประกอบในหน้า ใครช่วยอธิบายสิ่งที่ Asterisk * ทำใน CSS ได้บ้าง <style> * { outline: 2px dotted red } * * { outline: 2px dotted green } * * * { outline: 2px dotted orange } * * * * { outline: 2px dotted blue } * * * * * { …

99 css css-selectors

5

การใช้ querySelector กับ ID ที่เป็นตัวเลข

จากสิ่งที่ฉันเข้าใจข้อมูลจำเพาะของ HTML5 ช่วยให้คุณใช้ ID ที่เป็นตัวเลขเช่นนี้ <div id="1"></div> <div id="2"></div> ฉันสามารถเข้าถึงเหล่านี้ปรับใช้แต่ไม่ได้มีgetElementById querySelectorถ้าฉันลองทำสิ่งต่อไปนี้ฉันจะได้รับSyntaxError: DOM Exception 12ในคอนโซล document.querySelector("#1") ฉันแค่อยากรู้ว่าทำไมการใช้ตัวเลขเป็น ID จึงไม่ทำงานquerySelectorเมื่อข้อมูลจำเพาะ HTML5 ระบุว่าถูกต้อง ฉันลองใช้เบราว์เซอร์หลายตัว

98 javascript html css-selectors selectors-api

9

เครื่องหมายจุลภาคและช่องว่างในหลายชั้นเรียนมีความหมายอย่างไรใน CSS

นี่คือตัวอย่างที่ฉันไม่เข้าใจ: .container_12 .grid_6, .container_16 .grid_8 { width: 460px; } สำหรับฉันแล้วดูเหมือนว่าwidth: 460pxจะใช้กับชั้นเรียนที่กล่าวถึงข้างต้นทั้งหมด แต่ทำไมบางชั้นเรียนจึงคั่นด้วยเครื่องหมายจุลภาค ( ,) และบางชั้นก็เว้นวรรค ฉันคิดว่าwidth: 460pxจะใช้กับองค์ประกอบเหล่านั้นที่รวมคลาสตามที่กล่าวไว้ในไฟล์ CSS เท่านั้น ตัวอย่างเช่นจะใช้กับ<div class='container_12 grid_6'>แต่จะไม่ใช้กับไฟล์<div class='container_12'>. สมมติฐานนี้ถูกต้องหรือไม่?

98 css css-selectors

5

วิธีการเลือก DIV หลักโดยใช้ jQuery

var classes = $(this).attr('class').split(' '); // this gets the current element classes var classes = $(this).parent().attr('class').split(' '); // this gets the parent classes. ผู้ปกครองในสถานการณ์ข้างต้นคืออังกอร์ ถ้าฉันต้องการรับ DIV หลักแรกของ $ (นี่) รหัสจะเป็นอย่างไร var classes = $(this).div:parent().attr('class').split(' '); // just a quick try. *โดยทั่วไปฉันต้องการได้รับคลาสของ DIV หลักแรกของ $ (this) ขอบคุณ

98 javascript jquery css-selectors

5

ตัวเลือก * * CSS ทำอะไร?

เมื่อเร็ว ๆ นี้ฉันมาข้าม* *ในCSS อ้างอิงเว็บไซต์ - เชื่อมโยงเว็บไซต์ สำหรับการ*ใช้งานเพียงครั้งเดียวในสไตล์ชีต CSS Internet และ Stack Overflow จะเต็มไปด้วยตัวอย่าง แต่ฉันไม่แน่ใจเกี่ยวกับการใช้* *สัญลักษณ์สองตัวใน CSS ฉัน googled มัน แต่ไม่พบข้อมูลที่เกี่ยวข้องใด ๆ เกี่ยวกับเรื่องนี้เนื่องจากตัวเดียว*เลือกองค์ประกอบทั้งหมด แต่ฉันไม่แน่ใจว่าทำไมไซต์ถึงใช้มันสองครั้ง อะไรคือส่วนที่ขาดหายไปของสิ่งนี้และเหตุใดจึงใช้แฮ็กนี้ (หากเป็นการแฮ็ก)

97 html css css-selectors

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