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

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

8
จะแทรกองค์ประกอบเป็นลูกคนแรกได้อย่างไร?
ฉันต้องการเพิ่ม div เป็นองค์ประกอบแรกโดยใช้ jquery ในการคลิกปุ่มแต่ละครั้ง <div id='parent-div'> <!--insert element as a first child here ...--> <div class='child-div'>some text</div> <div class='child-div'>some text</div> <div class='child-div'>some text</div> </div>

4
ตัวเลือก CSS ใดที่สามารถใช้เพื่อเลือก div แรกภายใน div อื่น
ฉันมีสิ่งที่ชอบ: <div id="content> <h1>Welcome to Motor City Deli!</h1> <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div> <div > ... </div> ตัวเลือก css สำหรับ div ที่สองคืออะไร (div ที่ 1 ภายใน div "content") เพื่อให้ฉันสามารถกำหนดสีฟอนต์ของวันที่ภายใน div นั้นได้

11
: not (: empty) ตัวเลือก CSS ไม่ทำงาน?
ฉันมีเวลาพอสมควรกับตัวเลือก CSS นี้ซึ่งไม่ต้องการทำงานเมื่อฉันเพิ่ม:not(:empty)เข้าไป ดูเหมือนว่าจะทำงานได้ดีกับการรวมกันของตัวเลือกอื่น ๆ : input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none } ถ้าฉันถอดชิ้น:not(:empty)ส่วนออกมันก็ใช้ได้ดี แม้ว่าฉันจะเปลี่ยนตัวเลือกinput:not(:empty)แต่ก็ยังไม่ได้เลือกช่องป้อนข้อมูลที่มีการพิมพ์ข้อความลงไป สิ่งนี้เสียหรือฉันไม่ได้รับอนุญาตให้ใช้:emptyภายใน:not()ตัวเลือก? สิ่งเดียวที่ฉันคิดได้คือเบราว์เซอร์ยังคงบอกว่าองค์ประกอบนั้นว่างเปล่าเพราะไม่มีลูกเพียงแค่ "ค่า" ต่อการพูด ที่ไม่:emptyเลือกไม่ได้มีการทำงานที่แยกต่างหากสำหรับองค์ประกอบเข้ากับองค์ประกอบปกติ? สิ่งนี้ดูไม่น่าจะเป็นไปได้เพราะการใช้งาน:emptyบนฟิลด์และการพิมพ์บางสิ่งลงไปจะทำให้เอฟเฟกต์ทางเลือกหายไป (เนื่องจากไม่ว่างเปล่าอีกต่อไป) ทดสอบใน Firefox 8 และ Chrome


10
การเลือกเฉพาะองค์ประกอบระดับแรกใน jquery
ฉันจะเลือกองค์ประกอบลิงก์ของผู้ปกครอง<ul>จากรายการเช่นนี้ได้อย่างไร <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> ดังนั้นใน css ul li aแต่ไม่ใช่ul li ul li a ขอบคุณ

1
ตัวเลือกแอตทริบิวต์ CSS สำหรับแอตทริบิวต์ที่ไม่ว่างเปล่า
มีตัวเลือก CSS ที่ใช้กับแอตทริบิวต์ที่ไม่ว่างเปล่าหรือไม่? ใช้การ:not([Data-Attribute=''])จับคู่หากแอตทริบิวต์ไม่มีอยู่ด้วย [Data-Attribute!='']ฉันกำลังมองหาสิ่งที่ต้องการ

3
คำถามตัวเลือก CSS3 สำหรับทุกคนยกเว้นก่อนเลือก
ด้วยมาร์กอัปต่อไปนี้ฉันต้องการให้ตัวเลือก CSS เลือกเมนูทั้งหมดยกเว้นเมนูแรกในแต่ละตัวเลือก div ซึ่งอาจมีได้มากมาย: <div class="options"> <div class="opt1"> <select title="Please choose Warranty"> <option value="">Select Waranty</option> <option value="1">1 year guarantee</option> <option value="2">3 year guarantee</option> </select> </div> <div class="opt2"> <select title="Please choose Color"> <option value="">Select Color</option> <option value="1">Red</option> <option value="2">Blue</option> </select> </div> <div class="opt3"> <select title="Please choose Size"> <option value="">Select Size</option> …

3
ตัวเลือก CSS (id ประกอบด้วยส่วนหนึ่งของข้อความ)
ผมมีคำถาม. ฉันมีองค์ประกอบดังนี้: <a> องค์ประกอบที่มี id = someGenerated บาง: เหมือนกัน: 0: name <a> องค์ประกอบที่มี id = someGenerated บาง: เหมือนกัน: 0: นามสกุล <a> องค์ประกอบที่มี id = someGenerated บาง: เดียวกัน: 1: ชื่อ <a> องค์ประกอบที่มี id = someGenerated บาง: เดียวกัน: 1: นามสกุล ฉันต้องการตัวเลือก CSS เพื่อรับชื่อ ปัญหาคือไม่รู้จะเอายังไง ฉันลองแล้วa[id*='Some:Same']- มันส่งคืน<a>องค์ประกอบทั้งหมด หลังจากที่ฉันสามารถรับองค์ประกอบที่ id ลงท้ายด้วยชื่อ แต่ฉันไม่ชอบความคิดนี้ ฉันคิดว่ามันสามารถทำได้ด้วยตัวเลือกอื่น ๆ

4
มีคลาสหลอก CSS ตรงข้ามกับ: hover หรือไม่?
มีคลาสหลอกใน CSS เพื่อระบุหรือไม่ :not(:hover) หรือนั่นเป็นวิธีเดียวที่จะระบุรายการที่ไม่ถูกลอยอยู่? ฉันผ่านการอ้างอิง CSS3 หลายครั้งและไม่เห็นการกล่าวถึงคลาสหลอก CSS เพื่อระบุสิ่งที่ตรงกันข้ามกับ: hover

3
ฉันจะกำหนดเป้าหมายองค์ประกอบด้วยแอตทริบิวต์ที่มีค่าใน CSS ได้อย่างไร
ฉันรู้ว่าฉันสามารถกำหนดเป้าหมายองค์ประกอบที่มีแอตทริบิวต์เฉพาะใน CSS ได้เช่น: input[type=text] { font-family: Consolas; } แต่เป็นไปได้หรือไม่ที่จะกำหนดเป้าหมายองค์ประกอบที่มีแอตทริบิวต์ของค่าใด ๆ (ยกเว้นไม่มีอะไรเลยเช่นเมื่อไม่ได้เพิ่มแอตทริบิวต์ลงในองค์ประกอบ) ประมาณว่า: a[rel=*] { color: red; } ซึ่งควรกำหนดเป้าหมาย<a>แท็กแรกและที่สามใน HTML นี้: <a href="#" rel="eg">red text</a> <a href="#">standard text</a> <a href="#" rel="more">red text again</a> ฉันคิดว่าเป็นไปได้เพราะโดยค่าเริ่มต้นcursor: pointerดูเหมือนว่าจะถูกนำไปใช้กับ<a>แท็กใด ๆที่มีค่าสำหรับhrefแอตทริบิวต์

4
ความแตกต่างระหว่างตัวเลือก div + p (บวก) และ div ~ p (ทิลเดอ)
วิธีที่w3schools ใช้วลีนั้นฟังดูเหมือนกัน การอ้างอิง CSS ของ W3Schools div + p เลือก<p>องค์ประกอบทั้งหมดที่วางไว้หลัง<div>องค์ประกอบ div ~ p เลือกทุก<p>องค์ประกอบที่นำหน้าด้วย<div>องค์ประกอบ ถ้า<p>องค์ประกอบอยู่หลังองค์ประกอบทันที<div>นั่นหมายความว่า<p>องค์ประกอบนั้นอยู่ข้างหน้าด้วย<div>องค์ประกอบหรือไม่? อย่างไรก็ตามฉันกำลังมองหาตัวเลือกที่ฉันสามารถเลือกองค์ประกอบที่วางไว้ก่อนองค์ประกอบที่กำหนด

2
: hover but: not on a specific class
ฉันจะใช้ผลเลื่อนบนaองค์ประกอบ แต่ไม่ได้ไปยังaองค์ประกอบกับการเรียนactive? a:hover(not: .active) ดูเหมือนว่ามีบางอย่างหายไป

3
cssSelector & Xpath แตกต่างกันอย่างไรและข้อใดดีกว่าเมื่อเทียบกับประสิทธิภาพสำหรับการทดสอบข้ามเบราว์เซอร์
ฉันกำลังทำงานกับ Selenium WebDriver 2.25.0 บนเว็บแอปพลิเคชันหลายภาษาและทดสอบเนื้อหาของหน้าเป็นหลัก (สำหรับภาษาต่างๆเช่นอาหรับอังกฤษรัสเซียและอื่น ๆ ) สำหรับแอปพลิเคชันของฉันซึ่งดีกว่าตามประสิทธิภาพและตรวจสอบให้แน่ใจว่าควรรองรับเบราว์เซอร์ทั้งหมด (เช่น IE 7,8,9, FF, Chrome เป็นต้น) ขอบคุณล่วงหน้าสำหรับคำแนะนำที่มีค่าของคุณ

4
ตัวเลือกสำหรับแท็กหนึ่งตามด้วยแท็กอื่นโดยตรง
ซึ่งจะเลือก<B>แท็กทั้งหมดที่นำหน้าด้วย<A>แท็ก: A+B { /* styling */ } ตัวเลือกสำหรับ<A>แท็กทั้งหมดตามด้วย<B>แท็กโดยตรงคืออะไร นี่คือตัวอย่าง HTML ที่เหมาะกับคำถามของฉัน: <a>some text</a> <b>some text</b>

5
jQuery - รับรายการค่าของแอตทริบิวต์จากองค์ประกอบของคลาส
ฉันได้เรียนที่มีแอตทริบิวต์ที่เรียกว่า.object levelฉันต้องการรับรายการของค่าที่แตกต่างกันทั้งหมดlevelในเพจเพื่อที่ฉันจะได้เลือกค่าสูงสุด หากฉันทำสิ่งที่ชอบ: $(".object").attr("level") ... นั่นจะทำให้ฉันได้รับรายการค่าที่เป็นค่าของแอตทริบิวต์ระดับหรือไม่? ฉันไม่สงสัย แต่แล้วคุณจะทำอะไรแบบนั้นได้อย่างไร? หมายเหตุ:ฉันไม่ต้องการเลือกออบเจ็กต์ HTML สำหรับการจัดการเหมือนทั่วไป แต่ฉันต้องการเลือกค่าของแอตทริบิวต์ แก้ไข: เพื่อให้ได้ "ระดับ" สูงสุดฉันได้ทำสิ่งนี้แล้ว แต่ดูเหมือนจะไม่ได้ผล ฉันจะลองวิธีอื่นที่แนะนำตอนนี้ var highLevel=0; $.each(".object[level]", function(i, value) { if (value>highLevel) { highLevel=value; } }); alert(highLevel);

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