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

ฉันต้องการรวม:afterกับ:hoverใน CSS (หรือตัวเลือกหลอกอื่น ๆ ) ฉันเป็นพื้นมีรายชื่อและรายการที่มีระดับมีรูปร่างลูกศรประยุกต์ใช้selected :afterฉันต้องการเหมือนกันที่จะเป็นจริงสำหรับวัตถุที่ถูกโฉบไป แต่ไม่สามารถทำให้มันทำงานได้ นี่คือรหัส #alertlist { list-style:none; width: 250px; } #alertlist li { padding: 5px 10px; border-bottom: 1px solid #e9e9e9; position:relative; } #alertlist li.selected, #alertlist li:hover { color: #f0f0f0; background-color: #303030; } #alertlist li.selected:after { position:absolute; top: 0; right:-10px; bottom:0; border-top: 10px solid transparent; border-bottom: …

176 css  css-selectors  pseudo-element 

สิ่งนี้ควรเรียบง่าย แต่ฉันมีปัญหาในการค้นหาข้อความค้นหา สมมติว่าฉันมีสิ่งนี้: <div class="a c">Foo</div> <div class="b c">Bar</div> ใน CSS ฉันจะสร้างตัวเลือกที่ตรงกับสิ่งที่ตรงกับ "(.a หรือ .b) และ. c" ได้อย่างไร ฉันรู้ว่าฉันสามารถทำสิ่งนี้: .a.c,.b.c { /* CSS stuff */ } แต่สมมติว่าฉันจะต้องใช้ตรรกะประเภทนี้มาก ๆ ด้วยความหลากหลายของการรวมกันทางตรรกะจะมีไวยากรณ์ที่ดีกว่าหรือไม่?

176 html  css  css-selectors 

ฉันต้องการใช้กฎ CSS กับองค์ประกอบใด ๆ ที่มีหนึ่งในชั้นเรียนตรงกับคำนำหน้าระบุ เช่นฉันต้องการกฎที่จะใช้กับ div ที่มีคลาสที่ขึ้นต้นด้วยstatus-(A และ C แต่ไม่ใช่ B ในตัวอย่างต่อไปนี้): <div id='A' class='foo-class status-important bar-class'></div> <div id='B' class='foo-class bar-class'></div> <div id='C' class='foo-class status-low-priority bar-class'></div> การรวมกันของ: div[class|=status]และdiv[class~=status-] มันสามารถทำได้ภายใต้ CSS 2.1 หรือไม่ มันสามารถใช้งานได้กับสเปค CSS หรือไม่? หมายเหตุ: ฉันรู้ว่าฉันสามารถใช้ jQuery เพื่อเลียนแบบสิ่งนั้นได้

175 css  css-selectors 

สิ่งที่ฉันต้องการจะทำ (ไม่ใช่ใน IE อย่างชัดเจน) คือ: p:not(.list):last-child + :text { margin-bottom: 10px; } ซึ่งจะให้ระยะขอบโหนดข้อความ (เป็นไปได้หรือไม่) ฉันจะได้รับโหนดข้อความด้วย CSS ได้อย่างไร

173 css  css-selectors 

ฉันมีบางลิงค์ที่ฉันต้องการเลือกคลาสและรหัสในเวลาเดียวกัน นั่นเป็นเพราะฉันมีพฤติกรรมที่แตกต่าง 2 อย่าง เมื่อคลาสของลิงก์มีชื่อคลาสหนึ่งชื่อพวกมันจะทำงานในทิศทางเดียวเมื่อลิงก์ประเภทเดียวกันมีชื่อคลาสอื่นพวกมันก็จะทำงานต่างกัน ชื่อคลาสเป็น switch with jquery ดังนั้นฉันต้องสามารถเลือกลิงค์คลาสและรหัสได้ในเวลาเดียวกัน เป็นไปได้ไหม ฉันพยายามแล้ว: $("a .save #country") ไม่มีผลลัพธ์ใด ๆ

170 jquery  dom  jquery-selectors  css-selectors 

คุณจะเลือกคนแรกและคนสุดท้ายTDในแถวได้อย่างไร? tr > td[0], tr > td[-1] { /* styles */ }

170 css  css-selectors 

ฉันกำลังมองหาตัวเลือก css ที่ให้ฉันเลือกรายการย่อยก่อนหน้าของรายการ <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <!-- select the pre last item dynamically no matter how long this list is --> <li>6</li> </ul> วิธีการคงที่: ul li:nth-child(5) วิธีการแบบไดนามิก: ul li:last-child(-1) ซึ่งแน่นอนว่าไม่ได้ตรวจสอบได้เช่นกัน nth-last-child ดูเหมือนจะไม่ได้ให้วิธีแบบไดนามิก .. ฉันสามารถย้อนกลับไปที่จาวาสคริปต์ แต่ฉันสงสัยว่ามีวิธี CSS ที่ฉันมองข้าม

161 css  css-selectors 

คำถามตัวเลือก CSS หากินไม่ทราบว่าเป็นไปได้หรือไม่ ให้บอกว่านี่คือเค้าโครง HTML: <div></div> <div></div> <div></div> <div style="display:none"></div> <div style="display:none"></div> ฉันต้องการเลือกตัวสุดท้ายdivซึ่งแสดง (เช่น. ไม่display:none) ซึ่งจะเป็นตัวที่สามdivในตัวอย่างที่กำหนด ในใจคุณจำนวนของdivในหน้าจริงอาจแตกต่างกัน (แม้แต่display:noneคน)

161 html  css  css-selectors 

ฉันได้ยินมาหลายครั้งแล้วว่าเนื้อหาที่แข็งแกร่งที่สุดของ jQuery คือวิธีการสืบค้นและจัดการองค์ประกอบใน DOM: คุณสามารถใช้การสืบค้น CSS เพื่อสร้างการสืบค้นที่ซับซ้อนซึ่งยากที่จะทำในจาวาสคริปต์ปกติ อย่างไรก็ตามเท่าที่ฉันรู้คุณสามารถบรรลุผลลัพธ์เดียวกันกับdocument.querySelectorหรือdocument.querySelectorAllซึ่งได้รับการสนับสนุนใน Internet Explorer 8 ขึ้นไป ดังนั้นคำถามคือ: ทำไมค่าใช้จ่าย 'ความเสี่ยง' jQuery หากสินทรัพย์ที่แข็งแกร่งที่สุดสามารถทำได้ด้วย JavaScript ที่บริสุทธิ์? ฉันรู้ว่า jQuery มีมากกว่าตัวเลือก CSS เช่น AJAX ข้ามเบราว์เซอร์ที่ดีกิจกรรมที่แนบมาเป็นต้น แต่ส่วนการสืบค้นมันเป็นส่วนสำคัญของความแข็งแกร่งของ jQuery! ความคิดใด ๆ

161 javascript  jquery  html  css-selectors  jquery-selectors 

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

159 css  css-selectors 

วิธีการเปลี่ยนรูปแบบขององค์ประกอบเด็กเมื่อมีการวางเมาส์ไว้บนองค์ประกอบหลัก ฉันต้องการโซลูชัน CSS สำหรับสิ่งนี้ถ้าเป็นไปได้ มีวิธีการแก้ปัญหาใด ๆ ที่เป็นไปได้ผ่าน: ตัวเลือก CSS hover ที่จริงฉันต้องเปลี่ยนสีของแถบตัวเลือกภายในแผงเมื่อมีการโฮเวอร์บนแผง มองหาการสนับสนุนเบราว์เซอร์ที่สำคัญทั้งหมด

155 css  css-selectors 

ฉันต้องการกำหนดเป้าหมายแท็กทั้งหมดในหน้า ฉันรู้ว่าคุณสามารถทำได้ด้วยวิธีนี้ ... h1, h2, h3, h4, h5, h6 { font: 32px/42px trajan-pro-1,trajan-pro-2; } แต่มีวิธีที่มีประสิทธิภาพมากขึ้นในการทำเช่นนี้โดยใช้ตัวเลือก CSS ขั้นสูง? เช่นบางสิ่งเช่น: [att^=h] { font: 32px/42px trajan-pro-1,trajan-pro-2; } (แต่เห็นได้ชัดว่านี่ไม่ได้ผล)

155 css  css-selectors 

ขณะนี้ฉันใช้ readonly = "อ่านอย่างเดียว" เพื่อปิดใช้งานฟิลด์ ตอนนี้ฉันพยายามจัดรูปแบบคุณลักษณะโดยใช้ CSS ฉันพยายามใช้ input[readonly] { /*styling info here*/ } แต่มันไม่ทำงานด้วยเหตุผลบางอย่าง ฉันยังลอง input[readonly='readonly'] { /*styling info here*/ } ที่ไม่ทำงานอย่างใดอย่างหนึ่ง ฉันจะจัดรูปแบบแอตทริบิวต์อ่านอย่างเดียวด้วย CSS ได้อย่างไร

150 html  css  css-selectors 

ฉันต้องการใช้ css บางส่วนสำหรับองค์ประกอบอินพุตและฉันต้องการทำเช่นนั้นเฉพาะกับอินพุตที่ไม่ได้ปิดใช้งานและไม่ใช่ประเภทการส่งด้านล่าง css ไม่ทำงานบางทีถ้ามีใครสามารถอธิบายฉันได้ว่าจะต้องเพิ่มสิ่งนี้อย่างไร input:not(disabled)not:[type="submit"]:focus{ box-shadow:0 0 2px 0 #0066FF; -webkit-box-shadow:0 0 4px 0 #66A3FF; }

143 css  css-selectors  pseudo-class 

ฉันจะใช้สไตล์กับกล่องใส่ข้อมูลที่ว่างได้อย่างไร หากผู้ใช้พิมพ์บางอย่างในฟิลด์อินพุตสไตล์นั้นไม่ควรใช้อีกต่อไป เป็นไปได้ใน CSS? ฉันลองสิ่งนี้: input[value=""]

141 css  input  css-selectors