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

2

กำหนดเป้าหมายคลาส css ภายในคลาส css อื่น

สวัสดีฉันมีปัญหากับคลาส css ใน joomla ฉันมีสอง div ในโมดูลหนึ่งคือ wrapper class = "wrapper" อีกอันคือ content class = "content" เนื้อหาอยู่ภายใน Wrapper สิ่งที่ฉันพยายามทำคือกำหนดเป้าหมายสไตล์ css ในคลาสเนื้อหา โดยปกติฉันจะใส่. content {my style info} ในสไตล์ชีต แต่ปัญหาคือคลาสนี้ถูกใช้หลายครั้งทั่วทั้งหน้า ดังนั้นในแบ็กเอนด์คุณสามารถกำหนดชื่อคลาสให้กับโมดูลได้ดังนั้นฉันจึงเรียกชื่อนี้ว่า. การรับรอง เพื่อที่ฉันจะไม่เปลี่ยนคลาสเนื้อหาอื่น ๆ ทั้งหมดในเพจฉันพยายามกำหนดเป้าหมายโดยใส่สิ่งนี้: .testimonials .content {my style info I am trying to apply} แต่มันใช้งานไม่ได้ฉันรู้ว่าคุณทำได้ด้วย div ดังนั้น #testimonials .content {my style …

95 html css joomla module

6

ใช้อย่างไรและที่ไหน :: ng-deep?

ฉันยังใหม่กับ Angular 4 ดังนั้นใครก็ได้โปรดอธิบายวิธีใช้และสถานที่ที่จะใช้ ::ng-deepใน Angular 4 ได้บ้าง อันที่จริงฉันต้องการเขียนทับคุณสมบัติ CSS บางส่วนของส่วนประกอบลูกจากส่วนประกอบหลัก นอกจากนี้ยังรองรับ IE11?

95 css angular angular-template

12

CSS: ฉันจะสร้างช่องว่างระหว่างแถวในตารางได้อย่างไร

ความหมายทำให้ตารางผลลัพธ์มีลักษณะดังนี้: [=== แถว ===] [=== แถว ===] [=== แถว ===] [=== แถว ===] ... และอื่น ๆ เช่นนี้: [=== แถว ===] [=== แถว ===] [=== แถว ===] [=== แถว ===] ฉันพยายามเพิ่ม margin-bottom:1em; เป็นทั้งtdและtrแต่ไม่มีอะไรเลย ความคิดใด ๆ ?

94 html css

5

ละเว้นการโต้ตอบของเมาส์บนภาพซ้อนทับ

ฉันมีแถบเมนูที่มีเอฟเฟกต์วางเมาส์และตอนนี้ฉันต้องการวางภาพโปร่งใสที่มีวงกลมและข้อความ "handdrawn" บนรายการเมนูรายการใดรายการหนึ่ง หากฉันใช้การวางตำแหน่งแบบสัมบูรณ์เพื่อวางภาพซ้อนทับเหนือรายการเมนูผู้ใช้จะไม่สามารถคลิกปุ่มและเอฟเฟกต์การวางเมาส์จะไม่ทำงาน มีวิธีใดบ้างที่จะปิดการใช้งานการโต้ตอบของเมาส์กับภาพซ้อนทับนี้เพื่อให้เมนูยังคงทำงานเหมือนเดิมแม้ว่าจะอยู่ใต้รูปภาพก็ตาม แก้ไข: เนื่องจากเมนูถูกสร้างขึ้นด้วย joomla ฉันจึงไม่สามารถปรับแต่งรายการเมนูใดรายการหนึ่งได้ และแม้ว่าฉันจะทำได้ แต่ฉันก็ไม่รู้สึกว่าโซลูชันจาวาสคริปต์นั้นเหมาะสม ในที่สุดฉันก็ "ทำเครื่องหมาย" รายการเมนูด้วยลูกศรที่อยู่นอกองค์ประกอบรายการเมนู ไม่ดีเท่าที่ฉันอยากให้เป็น แต่มันก็ใช้ได้ดีอยู่ดี

94 javascript html css xhtml javascript-events

3

ส่วนท้ายที่ด้านล่างของหน้าหรือเนื้อหาแล้วแต่จำนวนใดจะต่ำกว่า

ฉันมีโครงสร้างดังต่อไปนี้: <body> <div id="main-wrapper"> <header> </header> <nav> </nav> <article> </article> <footer> </footer> </div> </body> ฉันโหลดเนื้อหาแบบไดนามิกในการ<article>ใช้จาวาสคริปต์ ด้วยเหตุนี้ความสูงของ<article>บล็อกจึงเปลี่ยนแปลงได้ ฉันต้องการให้<footer>บล็อกอยู่ที่ด้านล่างของหน้าเมื่อมีเนื้อหาจำนวนมากหรือที่ด้านล่างของหน้าต่างเบราว์เซอร์เมื่อมีเนื้อหาเพียงไม่กี่บรรทัด ในขณะนี้ฉันสามารถทำอย่างใดอย่างหนึ่ง ... แต่ไม่ใช่ทั้งสองอย่าง ไม่มีใครรู้ว่าฉันทำได้อย่างไร - <footer>ให้ติดที่ด้านล่างของหน้า / เนื้อหาหรือด้านล่างของหน้าจอขึ้นอยู่กับว่าส่วนใดต่ำกว่า

94 css html footer

12

ปิดใช้งานการเติมข้อความอัตโนมัติผ่าน CSS

เป็นไปได้หรือไม่ที่จะใช้ CSS เพื่อปิดใช้งานการเติมข้อความอัตโนมัติในองค์ประกอบแบบฟอร์ม (โดยเฉพาะฟิลด์ข้อความ) ฉันใช้ไลบรารีแท็กซึ่งไม่อนุญาตให้ใช้องค์ประกอบเติมข้อความอัตโนมัติและฉันต้องการปิดใช้งานการเติมข้อความอัตโนมัติโดยไม่ใช้ Javascript

94 html css forms

4

การลบขึ้นบรรทัดใหม่หลังแท็ก <h1>?

ฉันมีปัญหาในการลบ<h1>เส้นแบ่งหลังแท็กเนื่องจากทุกครั้งที่พิมพ์มันจะเพิ่มตัวแบ่งบรรทัดตามหลังดังนั้นสิ่งที่ต้องการจะ<h1>Hello World!</h1> <h2>Hello Again World!</h2>พิมพ์ออกมาดังนี้: Hello World! Hello Again World! ฉันไม่แน่ใจว่าต้องเปลี่ยนแท็กอะไรใน CSS แต่ฉันคาดว่ามันจะเกี่ยวข้องกับช่องว่างภายในหรือระยะขอบ ฉันยังต้องการให้มีช่องว่างในแนวตั้งถ้าเป็นไปได้

94 html css header styles stylesheet

4

คุณสร้าง div "tabbable" ได้อย่างไร

ฉันมีปุ่มที่เป็นองค์ประกอบ div และฉันต้องการสร้างมันขึ้นมาเพื่อให้ผู้ใช้กดปุ่มแท็บบนแป้นพิมพ์และเลื่อนไปมาระหว่างปุ่มเหล่านั้นได้ ฉันได้ลองตัดข้อความในแท็กจุดยึดแล้ว แต่ดูเหมือนจะไม่ได้ผล ใครมีวิธีแก้ไหมครับ?

94 html css xhtml

3

จะเปลี่ยนตำแหน่งแถบเลื่อนด้วย CSS ได้อย่างไร?

มีวิธีใดในการเปลี่ยนตำแหน่งของแถบเลื่อนจากซ้ายไปขวาหรือจากล่างขึ้นบนด้วย CSS หรือไม่?

94 html css scrollbar

10

ฉันจะป้องกันการสืบทอด CSS ได้อย่างไร

ฉันมีเมนูการนำทางแบบลำดับชั้นในแถบด้านข้างที่ใช้รายการที่ซ้อนกัน (แท็ก <ul> และ <li>) ฉันกำลังใช้ธีมที่สร้างไว้ล่วงหน้าซึ่งมีสไตล์สำหรับรายการอยู่แล้ว แต่ฉันต้องการเปลี่ยนสไตล์ของไอเท็มระดับบนสุด แต่ไม่ได้นำไปใช้กับไอเท็มย่อย มีวิธีง่ายๆในการนำสไตล์ไปใช้กับแท็กรายการระดับบนสุดโดยไม่ต้องเรียงซ้อนสไตล์เหล่านั้นลงไปที่รายการย่อยหรือไม่? ฉันเข้าใจว่าฉันสามารถเพิ่มรูปแบบการลบล้างให้กับรายการย่อยได้อย่างชัดเจน แต่ฉันต้องการหลีกเลี่ยงการทำซ้ำโค้ดสไตล์นั้นทั้งหมดหากมีวิธีง่ายๆเพียงแค่พูดว่า "ใช้สไตล์เหล่านี้กับคลาสนี้และอย่าเรียงซ้อน ลงไปที่องค์ประกอบของเด็ก ๆ " นี่คือ html ที่ฉันใช้: <ul id="sidebar"> <li class="top-level-nav"> <span>HEADING 1</span> <ul> <li>sub-heading A</li> <li>sub-heading B</li> </ul> </li> <li class="top-level-nav"> <span>HEADING 2</span> <ul> <li>sub-heading A</li> <li>sub-heading B</li> </ul> </li> </ul> ดังนั้น CSS จึงมีสไตล์สำหรับ#sidebar ulและ#sidebar ul liอยู่แล้ว แต่ฉันต้องการเพิ่มสไตล์เพิ่มเติมเพื่อ#sidebar …

94 css

3

ฉันสามารถทำเครื่องหมายฟิลด์ไม่ถูกต้องจากจาวาสคริปต์ได้หรือไม่?

จากการอ่านโพสต์นี้ฉันพบว่ามีคลาสหลอกสำหรับค่าอินพุต 'ถูกต้อง' และ 'ไม่ถูกต้อง' ที่นำมาใช้กับ HTML5 มีวิธีใดบ้างที่ฉันสามารถทำเครื่องหมายช่องป้อนข้อมูลว่าไม่ถูกต้อง / ถูกต้องจากจาวาสคริปต์ หรือฉันสามารถแทนที่วิธีการตรวจสอบความถูกต้องที่ใช้ได้หรือไม่?

94 javascript html css validation

12

จะทำให้ <label> และ <input> ปรากฏในบรรทัดเดียวกันบนฟอร์ม HTML ได้อย่างไร

ฉันกำลังสร้างแบบฟอร์มการลงทะเบียนสำหรับเว็บไซต์ ฉันต้องการให้แต่ละป้ายกำกับและองค์ประกอบอินพุตที่เกี่ยวข้องปรากฏในบรรทัดเดียวกัน นี่คือรหัสของฉัน: #form { background-color: #FFF; height: 600px; width: 600px; margin-right: auto; margin-left: auto; margin-top: 0px; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 0px; } label { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; color: #333; height: 20px; width: 200px; margin-top: 10px; margin-left: 10px; text-align: right; clear: both; } …

94 html css forms

6

ข้อความค้นหาสื่อจำลองโหมดอุปกรณ์ Chrome ไม่ทำงาน

ด้วยเหตุผลบางประการโหมดจำลองอุปกรณ์ไม่อ่านข้อความค้นหาสื่อของฉัน ทำงานบนไซต์อื่น ๆ รวมถึงไซต์ของฉันเองที่ฉันสร้างด้วย bootstrap แต่มันไม่ทำงานกับการสืบค้นสื่อที่ฉันใช้ตั้งแต่เริ่มต้น (การคลิกปุ่มการสืบค้นสื่อจะเปลี่ยนปุ่มเป็นสีน้ำเงิน แต่ไม่มีการแสดงข้อความค้นหาสื่อ) ไฟล์ทดสอบด้านล่าง นี่เป็นข้อบกพร่องใน Chrome หรือมีบางอย่างที่ฉันต้องเปลี่ยนแปลงในไฟล์หรือไม่ <!DOCTYPE html>  <html> <head> <title>MQ Example 1</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: sans-serif; } h1 { color: red; } h2 { color:blue; } …

94 css google-chrome media-queries developer-tools

9

ฉันจะทำให้เนื้อหาขององค์ประกอบคงที่เลื่อนได้เฉพาะเมื่อเกินความสูงของวิวพอร์ตได้อย่างไร

ฉันมีdivตำแหน่งfixedที่ด้านซ้ายของหน้าเว็บซึ่งมีเมนูและลิงก์การนำทาง ไม่มีความสูงกำหนดจาก css เนื้อหากำหนดความสูงความกว้างคงที่ ปัญหาคือถ้าเนื้อหามากเกินไปdivจะมีขนาดใหญ่กว่าความสูงของหน้าต่างและจะมองไม่เห็นเนื้อหาบางส่วน (การเลื่อนหน้าต่างไม่ช่วยเนื่องจากตำแหน่งอยู่fixedและdivจะไม่เลื่อน) ฉันพยายามตั้งค่าoverflow-y:auto;แต่ก็ไม่ได้ผลเช่นกัน div ดูเหมือนจะไม่สังเกตเห็นว่าส่วนนั้นอยู่นอกหน้าต่าง ฉันจะทำให้เนื้อหาเป็นแบบเลื่อนได้ถ้าจำเป็นเท่านั้นหากdivแฮงค์เอาท์นอกหน้าต่าง

94 html css css-position

1

ป้องกันไม่ให้รายการดิ้นยืด

ตัวอย่าง: div { display: flex; height: 200px; background: tan; } span { background: red; } <div> <span>This is some text.</span> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ฉันมีสองคำถามโปรด: ทำไมโดยพื้นฐานถึงเกิดขึ้นกับspan? อะไรคือแนวทางที่ถูกต้องในการป้องกันไม่ให้ยืดโดยไม่ส่งผลกระทบต่อสิ่งของอื่น ๆ ในภาชนะดิ้น?

94 html css flexbox

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