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

30

ฉันจะเลือก<li>องค์ประกอบที่เป็น parent โดยตรงขององค์ประกอบ anchor ได้อย่างไร เป็นตัวอย่าง CSS ของฉันจะเป็นดังนี้: li < a.active { property: value; } เห็นได้ชัดว่ามีวิธีการทำเช่นนี้กับ JavaScript แต่ฉันหวังว่าจะมีวิธีการแก้ปัญหาบางอย่างที่มีอยู่ใน CSS ระดับ 2 เมนูที่ฉันพยายามจัดแต่งสไตล์นั้นถูกพ่นออกมาโดย CMS ดังนั้นฉันจึงไม่สามารถย้ายองค์ประกอบที่ใช้งานอยู่ไปยัง<li>องค์ประกอบ ... (เว้นแต่ฉันจะกำหนดธีมของโมดูลการสร้างเมนู ความคิดใด ๆ

3175 css css-selectors

15

มีตัวเลือก“ พี่น้องก่อนหน้า” หรือไม่?

Наэтотвопросестьответына Stack Overflow нарусском : Селекторлевыхсоседей เครื่องหมายบวก ( +) สำหรับพี่น้องคนต่อไป มีเทียบเท่าสำหรับพี่น้องก่อนหน้า?

1355 css css-selectors

9

อักขระใดถูกต้องในชื่อคลาส / ตัวเลือก CSS

อนุญาตให้ใช้อักขระ / สัญลักษณ์ใดได้บ้างในตัวเลือกคลาสCSS ฉันรู้ว่าตัวอักษรต่อไปนี้ไม่ถูกต้องแต่ตัวอักษรอะไรถูกต้อง ? ~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

1203 css css-selectors

17

ตัวเลือก CSS สำหรับองค์ประกอบแรกที่มีคลาส

ฉันมีองค์ประกอบหลายอย่างที่มีชื่อคลาสredแต่ฉันไม่สามารถเลือกองค์ประกอบแรกด้วยการclass="red"ใช้กฎ CSS ต่อไปนี้: .red:first-child { border: 5px solid red; } <p class="red"></p> <div class="red"></div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล มีอะไรผิดปกติในตัวเลือกนี้และฉันจะแก้ไขได้อย่างไร? ขอบคุณความคิดเห็นที่ฉันคิดว่าองค์ประกอบจะต้องเป็นลูกคนแรกของผู้ปกครองที่จะได้รับการคัดเลือกซึ่งไม่ใช่กรณีที่ฉันมี ฉันมีโครงสร้างต่อไปนี้และกฎนี้ล้มเหลวตามที่ระบุไว้ในความคิดเห็น: .home .red:first-child { border: 1px solid red; } <div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ฉันจะกำหนดเป้าหมายเด็กคนแรกด้วยชั้นเรียนได้redอย่างไร

945 css css-selectors

5

CSS ตัวเลือก“ ~” (tilde / squiggle / twiddle) หมายถึงอะไร?

การค้นหา~ตัวละครนั้นไม่ใช่เรื่องง่าย ฉันดู CSS และพบสิ่งนี้ .check:checked ~ .content { } มันหมายความว่าอะไร?

857 css css-selectors

9

ไม่: ตัวเลือกลูกคนแรก

ฉันมีdivแท็กที่มีหลายulแท็ก ฉันสามารถตั้งค่าคุณสมบัติ CSS สำหรับulแท็กแรกเท่านั้น: div ul:first-child { background-color: #900; } อย่างไรก็ตามความพยายามของฉันต่อไปนี้ในการตั้งค่าคุณสมบัติ CSS สำหรับแต่ละulแท็กยกเว้นแท็กแรกไม่ทำงาน: div ul:not:first-child { background-color: #900; } div ul:not(:first-child) { background-color: #900; } div ul:first-child:after { background-color: #900; } ฉันจะเขียนใน CSS: "แต่ละองค์ประกอบยกเว้นองค์ประกอบแรก" ได้อย่างไร

811 css css-selectors

11

ตัวเลือก CSS“ +” (เครื่องหมายบวก) หมายถึงอะไร?

ตัวอย่างเช่น: p + p { /* Some declarations */ } ฉันไม่รู้ว่า+หมายถึงอะไร ความแตกต่างระหว่างนี้และเพียงแค่การกำหนดรูปแบบสำหรับการpได้โดยไม่ต้อง+ p?

750 css css-selectors

5

สามารถ: หลอก () หลอกระดับมีหลายอาร์กิวเมนต์?

ฉันพยายามที่จะเลือกinputองค์ประกอบของทุกtypes ยกเว้นและradiocheckbox มีหลายคนที่แสดงให้เห็นว่าคุณสามารถใส่อาร์กิวเมนต์ได้หลายอย่าง:notแต่การใช้typeดูเหมือนจะไม่ได้ผลฉันก็ลองใช้ดู form input:not([type="radio"], [type="checkbox"]) { /* css here */ } ความคิดใด ๆ

746 css css-selectors

4

wildcard * ใน CSS สำหรับคลาส

ฉันมี divs เหล่านี้ที่ผมจัดแต่งทรงผมด้วย.tocolorแต่ฉันยังต้องระบุที่ไม่ซ้ำ 1,2,3,4 ฯลฯ tocolor-1ดังนั้นฉันเพิ่มว่ามันเป็นชั้นอื่น <div class="tocolor tocolor-1"> tocolor 1 </div> <div class="tocolor tocolor-2"> tocolor 2 </div> <div class="tocolor tocolor-3"> tocolor 3 </div> <div class="tocolor tocolor-4"> tocolor 4 </div> .tocolor{ background: red; } มีวิธีที่จะมีเพียงแค่ 1 คลาสtocolor-*หรือไม่ ฉันพยายามใช้ไวด์การ์ด*เหมือนใน css นี้ แต่มันไม่ทำงาน .tocolor-*{ background: red; }

670 css css-selectors wildcard

10

ฉันสามารถเขียน CSS selector การเลือกองค์ประกอบที่ไม่มีคลาสหรือคุณสมบัติที่แน่นอนได้หรือไม่?

ฉันต้องการเขียนกฎตัวเลือก CSS ที่เลือกองค์ประกอบทั้งหมดที่ไม่มีคลาสที่แน่นอน ตัวอย่างเช่นกำหนด HTML ต่อไปนี้: <html class="printable"> <body class="printable"> <h1 class="printable">Example</h1> <nav>  </nav> <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a> <p class="printable"> This page is super interresting and you should print it! </p> </body> </html> ผมอยากจะเขียนตัวเลือกที่เลือกองค์ประกอบทั้งหมดที่ไม่ได้มีคลาส "พิมพ์" ซึ่งในกรณีนี้เป็นnavและองค์ประกอบ เป็นไปได้ไหม หมายเหตุ: ใน HTML จริงที่ฉันต้องการใช้นี้จะมีองค์ประกอบมากมายที่ไม่มีคลาส "ที่พิมพ์ได้" มากกว่าที่จะทำ (ฉันรู้ว่ามันเป็นอีกวิธีหนึ่งในตัวอย่างด้านบน)

644 html css css-selectors

3

เหตุใดเบราว์เซอร์จึงตรงกับตัวเลือก CSS จากขวาไปซ้าย

CSS Selectors ถูกจับคู่โดยเครื่องมือเบราว์เซอร์จากขวาไปซ้าย ดังนั้นพวกเขาจึงหาเด็ก ๆ ก่อนจากนั้นตรวจสอบผู้ปกครองเพื่อดูว่าตรงกับส่วนที่เหลือของกฎหรือไม่ ทำไมนี้ มันเป็นเพียงเพราะสเป็คบอกว่า? มันจะมีผลต่อเค้าโครงท้ายที่สุดหรือไม่หากประเมินจากซ้ายไปขวา สำหรับฉันวิธีที่ง่ายที่สุดที่จะทำคือใช้ตัวเลือกที่มีจำนวนองค์ประกอบน้อยที่สุด ดังนั้น IDs เป็นอันดับแรก (เนื่องจากควรคืนค่า 1 องค์ประกอบเท่านั้น) จากนั้นอาจคลาสหรือองค์ประกอบที่มีจำนวนโหนดน้อยที่สุด - เช่นอาจมีเพียงหนึ่งช่วงบนหน้าดังนั้นไปที่โหนดนั้นโดยตรงด้วยกฎใด ๆ ที่อ้างอิงช่วง นี่คือลิงค์บางส่วนที่สำรองข้อมูลการอ้างสิทธิ์ของฉัน http://code.google.com/speed/page-speed/docs/rendering.html https://developer.mozilla.org/en/Writing_Efficient_CSS ดูเหมือนว่าจะทำเช่นนี้เพื่อหลีกเลี่ยงการดูเด็กทุกคนของพ่อแม่ (ซึ่งอาจเป็นจำนวนมาก) มากกว่าพ่อแม่ทุกคนของเด็กที่จะต้องเป็นหนึ่ง แม้ว่า DOM จะลึกมันก็จะดูที่หนึ่งโหนดต่อระดับแทนที่จะเป็นหลาย ๆ ในการจับคู่ RTL ง่ายกว่าหรือเร็วกว่าในการประเมิน CSS selectors LTR หรือ RTL

560 html css browser css-selectors

18

มีตัวเลือก CSS สำหรับองค์ประกอบที่มีข้อความบางอย่างหรือไม่

ฉันกำลังมองหาตัวเลือก CSS สำหรับตารางต่อไปนี้: Peter | male | 34 Susanne | female | 12 มีตัวเลือกใดที่จะตรงกับ TD ทั้งหมดที่มี "male" หรือไม่?

511 css css-selectors

5

เลือกองค์ประกอบตามคุณสมบัติข้อมูลใน CSS

เป็นไปได้หรือไม่ที่จะเลือกองค์ประกอบใน CSS โดยใช้แอตทริบิวต์ข้อมูล HTML5 (เช่นdata-role)

488 css html css-selectors custom-data-attribute

8

ตัวเลือก CSS“>” (เครื่องหมายมากกว่า) หมายถึงอะไร

ตัวอย่างเช่น: div > p.some_class { /* Some declarations */ } สิ่งที่ว่าไม่>หมายถึงเครื่องหมาย?

475 css css-selectors

1

CSS Selector ที่ใช้กับองค์ประกอบที่มีสองคลาส

มีวิธีในการเลือกองค์ประกอบที่มี CSS ตามค่าของแอตทริบิวต์ class ที่กำหนดเป็นสองคลาสเฉพาะหรือไม่ ตัวอย่างเช่นสมมติว่าฉันมี 3 divs: <div class="foo">Hello Foo</div> <div class="foo bar">Hello World</div> <div class="bar">Hello Bar</div> CSS ใดที่ฉันสามารถเขียนเพื่อเลือกเฉพาะองค์ประกอบที่สองในรายการโดยขึ้นอยู่กับความจริงที่ว่ามันเป็นสมาชิกของทั้งชั้นเรียน foo และบาร์?

472 css css-selectors

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