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

ฉันมีกรณีที่ฉันต้องเขียนโค้ด CSS แบบอินไลน์และฉันต้องการที่จะใช้สไตล์โฉบบนสมอ ฉันจะใช้a:hoverinline CSS ภายในแอตทริบิวต์สไตล์ HTML ได้อย่างไร เช่นคุณไม่สามารถใช้คลาส CSS ในอีเมล HTML ได้อย่างน่าเชื่อถือ

1016 html  css  inline-styles 

คุณจะใช้คุณสมบัติCSS contentเพื่อเพิ่มเอนทิตีHTML ได้อย่างไร การใช้บางสิ่งเช่นนี้เพียงพิมพ์ ไปที่หน้าจอแทนที่จะเป็นพื้นที่ไม่แตกหัก: .breadcrumbs a:before { content: ' '; }

1013 html  css  html-entities  css-content 

Наэтотвопросестьответына Stack Overflow нарусском : Сутькласса clearFix เมื่อเร็ว ๆ นี้ผมกำลังมองหารหัสผ่านของเว็บไซต์บางส่วนและเห็นว่าทุกคนมีชั้นเรียน<div> clearfix หลังจากการค้นหาอย่างรวดเร็วของ Google ฉันได้เรียนรู้ว่ามันเป็นของ IE6 บางครั้ง แต่จริงๆแล้ว clearfix คืออะไร? คุณช่วยให้ตัวอย่างบางส่วนของเลย์เอาต์มี clearfix เปรียบเทียบกับเลย์เอาต์ที่ไม่มี clearfix ได้หรือไม่?

1003 html  css  layout  cross-browser  clearfix 

ฉันสังเกตเห็นว่าบางเบราว์เซอร์ (โดยเฉพาะ Firefox และ Opera) มีความกระตือรือร้นอย่างมากในการใช้สำเนาไฟล์. cssและ. js ที่แคชไว้แม้ระหว่างช่วงเบราว์เซอร์ สิ่งนี้นำไปสู่ปัญหาเมื่อคุณอัปเดตหนึ่งในไฟล์เหล่านี้ แต่เบราว์เซอร์ของผู้ใช้ยังคงใช้แคชที่คัดลอก คำถามคือ: วิธีที่ดีที่สุดในการบังคับให้เบราว์เซอร์ของผู้ใช้โหลดไฟล์ใหม่เมื่อมีการเปลี่ยนแปลงคืออะไร? เป็นการดีที่โซลูชันจะไม่บังคับให้เบราว์เซอร์โหลดไฟล์ซ้ำทุกครั้งที่เข้าชมหน้าเว็บ ฉันจะโพสต์คำตอบของตัวเอง แต่ฉันอยากรู้ว่าใครมีวิธีแก้ปัญหาที่ดีกว่าและฉันจะให้คะแนนโหวตของคุณตัดสินใจ อัปเดต: หลังจากให้การสนทนาที่นี่ซักพักฉันพบว่าคำแนะนำของJohn Millikinและda5idมีประโยชน์ ปรากฎว่ามีคำสำหรับสิ่งนี้: การกำหนดเวอร์ชันอัตโนมัติ ฉันโพสต์คำตอบใหม่ด้านล่างซึ่งเป็นการผสมผสานระหว่างโซลูชันดั้งเดิมและคำแนะนำของจอห์น แนวคิดอื่นที่แนะนำโดยSCdFก็คือการผนวกสตริงข้อความค้นหาปลอมเข้ากับไฟล์ (รหัสไพ ธ อนบางตัวจะใช้การประทับเวลาโดยอัตโนมัติเนื่องจากสตริงการสืบค้นที่ปลอมเป็นการส่งโดยpi .) อย่างไรก็ตามมีการสนทนากันว่าเบราว์เซอร์จะแคชไฟล์ด้วยสตริงการสืบค้นหรือไม่ (โปรดจำไว้ว่าเราต้องการให้เบราว์เซอร์แคชไฟล์และใช้ในการเข้าชมในอนาคตเราต้องการให้เรียกไฟล์อีกครั้งเมื่อมีการเปลี่ยนแปลง) เนื่องจากยังไม่ชัดเจนว่าเกิดอะไรขึ้นกับสตริงข้อความปลอมฉันจึงไม่ยอมรับคำตอบนั้น

993 javascript  css  caching  auto-versioning 

มีวิธีที่สอดคล้องกันในทุกเบราว์เซอร์เพื่อซ่อนสปินบ็อกซ์ใหม่ที่บางเบราว์เซอร์ (เช่น Chrome) แสดงผลสำหรับการป้อน HTML ของหมายเลขประเภท? ฉันกำลังมองหาวิธี CSS หรือ JavaScript เพื่อป้องกันไม่ให้ลูกศรขึ้น / ลงปรากฏ <input id="test" type="number">

984 javascript  css  html  input  numbers 

ฉันใช้ Bootstrap ฉันจะสร้างสามคอลัมน์ให้สูงเท่ากันได้อย่างไร นี่คือภาพหน้าจอของปัญหา ฉันต้องการให้คอลัมน์สีน้ำเงินและสีแดงมีความสูงเท่ากับคอลัมน์สีเหลือง นี่คือรหัส: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-4 panel" style="background-color: red"> some content </div> <div class="col-xs-4 panel" style="background-color: yellow"> catz <img width="100" height="100" src="https://lorempixel.com/100/100/cats/"> </div> <div class="col-xs-4 panel" style="background-color: blue"> some more content </div> </div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

965 css  twitter-bootstrap 

ฉันต้องการความช่วยเหลือเกี่ยวกับการซ้อนทับคนใดคนหนึ่งมากกว่าบุคคลอื่นdivdiv รหัสของฉันมีลักษณะเช่นนี้: <div class="navi"></div> <div id="infoi"> <img src="info_icon2.png" height="20" width="32"/> </div> แต่น่าเสียดายที่ผมไม่สามารถรังdiv#infoiหรือภายในครั้งแรกimgdiv.navi มันต้องแยกกันสองอันdivดังที่แสดงไว้ แต่ฉันต้องรู้ว่าฉันจะวางส่วนdiv#infoiบนdiv.naviและด้านขวาสุดdiv.naviได้อย่างไร

958 html  css  position  overlay 

ฉันมีองค์ประกอบหลายอย่างที่มีชื่อคลาส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 

มีวิธีการเลือก / จัดการองค์ประกอบหลอก CSS เช่น::beforeและ::after(และรุ่นเก่าที่มีเซมิโคลอนหนึ่งอัน) โดยใช้ jQuery หรือไม่? ตัวอย่างเช่นสไตล์ชีทของฉันมีกฎต่อไปนี้: .span::after{ content:'foo' } ฉันจะเปลี่ยน 'foo' เป็น 'bar' โดยใช้ jQuery ได้อย่างไร

943 javascript  jquery  css  jquery-selectors  pseudo-element 

ในสถานที่นับไม่ถ้วนออนไลน์ฉันได้เห็นข้อเสนอแนะเพื่อรวม CSS ก่อนจาวาสคริปต์ เหตุผลโดยทั่วไปของแบบฟอร์มนี้ : เมื่อพูดถึงการสั่งซื้อ CSS และ JavaScript ของคุณคุณต้องการให้ CSS มาก่อน เหตุผลคือเธรดการแสดงผลมีข้อมูลสไตล์ทั้งหมดที่จำเป็นในการแสดงผลหน้า หาก JavaScript มีมาก่อนเครื่องมือ JavaScript จะต้องวิเคราะห์มันทั้งหมดก่อนที่จะดำเนินการต่อไปยังทรัพยากรชุดถัดไป ซึ่งหมายความว่าเธรดการแสดงผลไม่สามารถแสดงหน้าได้อย่างสมบูรณ์เนื่องจากไม่มีสไตล์ทั้งหมดที่ต้องการ การทดสอบจริงของฉันแสดงให้เห็นถึงสิ่งที่แตกต่างกันมาก: สายรัดทดสอบของฉัน ฉันใช้สคริปต์ Ruby ต่อไปนี้เพื่อสร้างความล่าช้าเฉพาะสำหรับทรัพยากรต่างๆ: require 'rubygems' require 'eventmachine' require 'evma_httpserver' require 'date' class Handler < EventMachine::Connection include EventMachine::HttpServer def process_http_request resp = EventMachine::DelegatedHttpResponse.new( self ) return unless @http_query_string path = …

897 javascript  css  performance 

ฉันใช้ Twitter Bootstrap 3 และฉันมีปัญหาเมื่อฉันต้องการจัดตำแหน่งแนวตั้งสองdivตัวอย่าง - ลิงค์ JSFiddle : <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="row"> <div class="col-xs-5"> <div style="height:5em;border:1px solid #000">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid #F00">Small</div> …

889 html  css  twitter-bootstrap  twitter-bootstrap-3 

ฉันกำลังเปลี่ยนCSSด้วยjQueryและฉันต้องการลบสไตล์ที่ฉันเพิ่มตามค่าอินพุต: if(color != '000000') $("body").css("background-color", color); else // remove style ? ฉันจะทำสิ่งนี้ได้อย่างไร โปรดทราบว่าบรรทัดด้านบนจะทำงานเมื่อใดก็ตามที่มีการเลือกสีโดยใช้เครื่องมือเลือกสี (เช่นเมื่อเมาส์เคลื่อนที่เหนือวงล้อสี) หมายเหตุที่สอง: ฉันไม่สามารถทำได้css("background-color", "none")เนื่องจากจะลบการกำหนดค่าเริ่มต้นออกจากไฟล์CSS ผมแค่อยากจะเอาbackground-colorรูปแบบอินไลน์ที่เพิ่มขึ้นโดยjQuery

868 javascript  jquery  css  background 

ฉันมีปัญหาอายุของการdivตัดเค้าโครงสองคอลัมน์ แถบด้านข้างของฉันลอยดังนั้นภาชนะของฉันdivล้มเหลวในการห่อเนื้อหาและแถบด้านข้าง <div id="container"> <div id="content"></div> <div id="sidebar"></div> </div> ดูเหมือนจะมีวิธีการมากมายในการแก้ไขข้อผิดพลาดที่ชัดเจนใน Firefox: <br clear="all"/> overflow:auto overflow:hidden ในสถานการณ์ของฉันสิ่งเดียวที่ดูเหมือนว่าจะทำงานอย่างถูกต้องคือ<br clear="all"/>วิธีการแก้ปัญหาซึ่งสกปรกเล็กน้อย overflow:autoให้แถบเลื่อนที่น่ารังเกียจแก่ฉันและoverflow:hiddenต้องมีผลข้างเคียงอย่างแน่นอน นอกจากนี้เห็นได้ชัดว่า IE7 ไม่ควรประสบปัญหานี้เนื่องจากพฤติกรรมที่ไม่ถูกต้อง แต่ในสถานการณ์ของฉันมันเป็นเช่นเดียวกับ Firefox วิธีใดที่เราสามารถใช้งานได้ในปัจจุบันนั้นแข็งแกร่งที่สุด?

864 css  clearfix 

ฉันมีdivชุดเป็นdisplay:block( 90px heightและwidth) และฉันมีข้อความอยู่ข้างใน ฉันต้องการข้อความที่จะจัดตำแหน่งในศูนย์ทั้งแนวตั้งและแนวนอน ฉันได้ลองtext-align:centerแล้ว แต่มันไม่ได้ทำในแนวนอนดังนั้นฉันจึงพยายามvertical-align:middleแต่มันไม่ทำงาน ความคิดใด ๆ

862 html  css 

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

857 css  css-selectors