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

Selectors เป็นรูปแบบที่ตรงกับองค์ประกอบในโครงสร้างเอกสาร ในกฎ CSS พวกเขาจะใช้เพื่อกำหนดรูปแบบสำหรับองค์ประกอบที่ตรงกับรูปแบบ

9
ใช้ CSS: ก่อนและ: หลังจากองค์ประกอบหลอกด้วย CSS แบบอินไลน์?
ฉันสร้างลายเซ็นอีเมล HTML ด้วย CSS แบบอินไลน์ (เช่น CSS ในstyleคุณลักษณะ) และฉันอยากรู้ว่ามันเป็นไปได้ที่จะใช้:beforeและ:afterองค์ประกอบหลอก ถ้าเป็นเช่นนั้นฉันจะใช้สิ่งนี้กับอินไลน์ CSS ได้อย่างไร td { text-align: justify; } td:after { content: ""; display: inline-block; width: 100%; }

2
เลือกองค์ประกอบสุดท้ายที่สองด้วย css
ฉันรู้แล้วว่า: ลูกคนสุดท้าย แต่มีวิธีเลือก div ไหม: <div id="container"> <div>a</div> <div>b</div> <div>SELECT THIS</div> <!-- THIS --> <div>c</div> </div> หมายเหตุ: ไม่มี jQuery เฉพาะกับ CSS
140 html  css  css-selectors 

3
จะยกเว้นชื่อคลาสเฉพาะในตัวเลือก CSS ได้อย่างไร
"reMode_hover"ฉันพยายามที่จะใช้สีพื้นหลังเมื่อผู้ใช้เลื่อนเมาส์องค์ประกอบที่มีชื่อชั้นเป็น แต่ผมไม่ต้องการที่จะเปลี่ยนสีถ้าองค์ประกอบยังมี"reMode_selected" หมายเหตุ: ฉันสามารถใช้ CSS เท่านั้นไม่ใช่จาวาสคริปต์เพราะฉันทำงานในสภาพแวดล้อมที่ จำกัด บางประเภท เพื่อความชัดเจนเป้าหมายของฉันคือการระบายสีองค์ประกอบแรกที่โฮเวอร์ แต่ไม่ใช่องค์ประกอบที่สอง HTML <a href="" title="Design" class="reMode_design reMode_hover"> <span>Design</span> </a> <a href="" title="Design" class="reMode_design reMode_hover reMode_selected"> <span>Design</span> </a> ฉันลองด้านล่างโดยหวังว่าคำจำกัดความแรกจะใช้ได้ผล แต่ก็ไม่เป็นเช่นนั้น ผมทำอะไรผิดหรือเปล่า? CSS /* do not apply background-color so leave this empty */ .reMode_selected .reMode_hover:hover { } .reMode_hover:hover { background-color: #f0ac00; }
139 html  css  css-selectors 

7
ใช้สไตล์กับแท็ก td ระดับแรกเท่านั้น
มีวิธีการนำสไตล์ของคลาสไปใช้กับแท็ก td เพียงระดับเดียวหรือไม่? <style>.MyClass td {border: solid 1px red;}</style> <table class="MyClass"> <tr> <td> THIS SHOULD HAVE RED BORDERS </td> <td> THIS SHOULD HAVE RED BORDERS <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table> </td> </tr> </table>
137 css  css-selectors 

2
: after vs. :: after
มีความแตกต่างในการทำงานระหว่าง CSS 2.1 :afterและ::afterตัวเลือกหลอกCSS 3 หรือไม่(นอกเหนือจาก::afterไม่รองรับในเบราว์เซอร์รุ่นเก่า) มีเหตุผลในทางปฏิบัติที่จะใช้ข้อกำหนดใหม่กว่านี้หรือไม่?

4
CSS Pseudo-class ที่มีสไตล์อินไลน์
Наэтотвопросестьответына กองมากเกินнарусском : Какпрописать: เลื่อนвнутри style =' '? เป็นไปได้ไหมที่จะมีคลาสหลอกโดยใช้สไตล์อินไลน์ ตัวอย่าง: <a href="http://www.google.com" style="hover:text-decoration:none;">Google</a> ฉันรู้ว่า HTML ข้างต้นใช้ไม่ได้ แต่มีบางอย่างที่คล้ายกันหรือไม่ ปล. ฉันรู้ว่าฉันควรใช้สไตล์ชีตภายนอกและฉันก็ทำ ฉันแค่อยากรู้ว่าสามารถทำได้โดยใช้สไตล์อินไลน์

5
เป็นไปได้ไหมที่จะเลือก n รายการสุดท้ายด้วยลูกที่ n
ใช้รายการมาตรฐานฉันกำลังพยายามเลือก 2 รายการสุดท้าย ฉันมีการเรียงสับเปลี่ยนต่างๆAn+Bแต่ดูเหมือนจะไม่มีอะไรให้เลือก 2 รายการสุดท้าย: li:nth-child(n+2) {} /* selects from the second onwards */ li:nth-child(n-2) {} /* selects everything */ li:nth-child(-n+2) {} /* selects first two only */ li:nth-child(-n-2) {} /* selects nothing */ ฉันทราบถึงตัวเลือก CSS3 ใหม่ที่ต้องการ:nth-last-child()แต่ฉันต้องการสิ่งที่ทำงานในเบราว์เซอร์อื่น ๆ อีกสองสามตัวถ้าเป็นไปได้ (อย่าสนใจ IE เป็นพิเศษ)
130 css  css-selectors 


4
การพิจารณาว่า jQuery ไม่พบองค์ประกอบใด ๆ
ฉันใช้ตัวเลือกของ jQuery โดยเฉพาะ id selector: $("#elementId")... ฉันจะตรวจสอบได้อย่างไรว่า jQuery พบองค์ประกอบหรือไม่ แม้ว่าองค์ประกอบที่มีรหัสที่ระบุจะไม่มีคำสั่งถัดไปให้ฉัน:[object Object] alert($("#idThatDoesnotexist"));

2
Sass และตัวเลือกเด็กรวม
ฉันเพิ่งค้นพบ Sass และฉันก็ตื่นเต้นกับมันมาก ในเว็บไซต์ของฉันฉันใช้เมนูการนำทางที่เหมือนต้นไม้ซึ่งมีสไตล์โดยใช้ลูก combinator ( E > F) มีวิธีใดในการเขียนโค้ดนี้ใหม่ด้วยไวยากรณ์ที่ง่ายกว่า (หรือดีกว่า) ใน Sass หรือไม่? #foo > ul > li > ul > li > a { color: red; }
126 css  css-selectors  sass 

7
คะแนนในความจำเพาะของ CSS คำนวณอย่างไร
การค้นคว้าข้อมูลเฉพาะที่ฉันพบในบล็อกนี้ - http://www.htmldog.com/guides/cssadvanced/specificity/ ระบุว่าความจำเพาะเป็นระบบการให้คะแนนแบบจุดสำหรับ CSS มันบอกเราว่าองค์ประกอบมีค่า 1 คะแนนคลาสมีค่า 10 คะแนนและ ID มีค่า 100 คะแนน นอกจากนี้ยังกล่าวอีกว่าคะแนนเหล่านี้รวมและจำนวนเงินโดยรวมคือความจำเพาะของตัวเลือกนั้น ตัวอย่างเช่น: body = 1 point body .wrapper = 11 points body .wrapper #container = 111 points ดังนั้นเมื่อใช้จุดเหล่านี้ฉันคาดว่า CSS และ HTML ต่อไปนี้จะส่งผลให้ข้อความเป็นสีน้ำเงิน: #a { color: red; } .a .b .c .d .e .f .g .h .i …

3
วิธีใช้ querySelectorAll เฉพาะสำหรับองค์ประกอบที่มีชุดแอตทริบิวต์เฉพาะ
ฉันกำลังพยายามใช้document.querySelectorAllสำหรับช่องทำเครื่องหมายทั้งหมดที่มีvalueชุดแอตทริบิวต์ มีช่องทำเครื่องหมายอื่น ๆ บนหน้าที่ไม่ได้valueตั้งค่าไว้และค่าจะแตกต่างกันสำหรับแต่ละช่องทำเครื่องหมาย รหัสและชื่อไม่ซ้ำกัน ตัวอย่าง: <input type="checkbox" id="c2" name="c2" value="DE039230952"/> ฉันจะเลือกเฉพาะช่องทำเครื่องหมายที่ตั้งค่าไว้ได้อย่างไร

3
อะไรคือความแตกต่างระหว่าง: first-child และ: first-of-type?
ฉันไม่สามารถบอกความแตกต่างระหว่างelement:first-childและelement:first-of-type ตัวอย่างเช่นคุณมี div div:first-child → <div>องค์ประกอบทั้งหมดที่เป็นลูกคนแรกของพ่อแม่ div:first-of-type → <div>องค์ประกอบทั้งหมดที่เป็น<div>องค์ประกอบแรกของพาเรนต์ สิ่งนี้ดูเหมือนจะเหมือนกันทุกประการ แต่ทำงานต่างกัน ใครช่วยอธิบายหน่อย
124 css  css-selectors 

10
ใช้ querySelectorAll เพื่อดึงข้อมูลลูกโดยตรง
ฉันสามารถทำได้: <div id="myDiv"> <div class="foo"></div> </div> myDiv = getElementById("myDiv"); myDiv.querySelectorAll("#myDiv > .foo"); นั่นคือฉันสามารถดึงข้อมูลลูกโดยตรงทั้งหมดของmyDivองค์ประกอบที่มีคลาสได้.fooสำเร็จ ปัญหาคือมันรบกวนฉันที่ฉันต้องรวม#myDivตัวเลือกไว้ในตัวเลือกเนื่องจากฉันกำลังเรียกใช้การสืบค้นในmyDivองค์ประกอบ (ดังนั้นจึงเห็นได้ชัดว่าซ้ำซ้อน) ฉันควรจะสามารถออกจากระบบได้#myDivแต่ตัวเลือกนั้นไม่ใช่ไวยากรณ์ทางกฎหมายเนื่องจากเริ่มต้นด้วยไฟล์>. ไม่มีใครรู้วิธีเขียนตัวเลือกที่ได้รับเฉพาะลูกโดยตรงขององค์ประกอบที่ตัวเลือกทำงานอยู่

7
ฉันสามารถรวม: nth-child () หรือ: nth-of-type () กับตัวเลือกโดยพลการได้หรือไม่?
มีวิธีเลือกลูกที่ n ทุกตัวที่ตรงกับ (หรือไม่ตรง) กับตัวเลือกโดยพลการหรือไม่? ตัวอย่างเช่นฉันต้องการเลือกทุกแถวตารางคี่ แต่อยู่ในส่วนย่อยของแถว: table.myClass tr.row:nth-child(odd) { ... } <table class="myClass"> <tr> <td>Row <tr class="row"> <!-- I want this --> <td>Row <tr class="row"> <td>Row <tr class="row"> <!-- And this --> <td>Row </table> แต่:nth-child()ก็ดูเหมือนว่าจะนับทุกtrองค์ประกอบโดยไม่คำนึงถึงหรือไม่ว่าพวกเขากำลังของ "แถว" ชั้นดังนั้นผมจึงจบลงด้วยหนึ่งแม้ "แถว" องค์ประกอบแทนของทั้งสองฉันกำลังมองหา :nth-of-type()สิ่งเดียวกันที่เกิดขึ้นกับ ใครช่วยอธิบายว่าทำไม?
117 css  css-selectors 

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.