Questions tagged «css»

我有一种情况，必须编写内联CSS代码，并且要在锚点上应用悬停样式。 如何a:hover在HTML样式属性内的内联CSS中使用？ 例如，您不能在HTML电子邮件中可靠地使用CSS类。

1015 html  css  inline-styles 

如何使用CSS content属性添加HTML实体？ 使用这样的东西只会打印 到屏幕上，而不是不间断的空间： .breadcrumbs a:before { content: ' '; }

1013 html  css  html-entities  css-content 

Наэтотвопросестьответына 堆栈溢出нарусском：СутьклассаclearFix 最近，我正在浏览一些网站的代码，发现每个人<div> 都有一个课程clearfix。 在Google进行快速搜索之后，我了解到有时是针对IE6的，但实际上是一个clearfix吗？ 与没有clearfix的布局相比，您能否提供一些带有clearfix的布局的示例？

1002 html  css  layout  cross-browser  clearfix 

我注意到一些浏览器（特别是Firefox和Opera）非常热衷于使用.css和.js文件的缓存副本，即使在浏览器会话之间也是如此。当您更新这些文件之一但用户的浏览器继续使用缓存的副本时，这会导致出现问题。 问题是：迫使用户的浏览器在文件更改后重新加载文件的最优雅的方法是什么？ 理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。我将发布自己的解决方案作为答案，但我很好奇是否有人有更好的解决方案，我将让您决定。 更新： 经过一段时间的讨论后，我发现John Millikin和da5id的建议很有用。事实证明有一个术语：自动版本化。 我在下面发布了一个新答案，该答案是我原来的解决方案和约翰的建议的结合。 SCdF建议的另一个想法是将伪查询字符串附加到文件中。（一些由pi提交的自动使用时间戳作为伪查询字符串的Python代码。）但是，关于浏览器是否将使用查询字符串缓存文件存在一些讨论。（请记住，我们希望浏览器缓存文件并在以后的访问中使用它。我们只希望它在更改后再次获取文件。） 由于尚不清楚假查询字符串会发生什么，因此我不接受该答案。

993 javascript  css  caching  auto-versioning 

跨浏览器是否存在一种一致的方式来隐藏某些浏览器（例如Chrome）为数字类型的HTML输入呈现的新旋转框？我正在寻找一种CSS或JavaScript方法来防止出现向上/向下箭头。 <input id="test" type="number">

982 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 

div在将一个人叠加到另一个人上时，我需要帮助div。 我的代码如下所示： <div class="navi"></div> <div id="infoi"> <img src="info_icon2.png" height="20" width="32"/> </div> 不幸的是，我不能将div#infoi或嵌套img在第一个内部div.navi。 div如图所示，它必须是两个单独的，但是我需要知道如何将放置在div#infoi上方div.navi和最右侧，并以的顶部为中心div.navi。

957 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？

944 css  css-selectors 

有什么方法可以使用jQuery 选择和操作CSS伪元素，例如::before和::after（以及带有分号的旧版本）？ 例如，我的样式表具有以下规则： .span::after{ content:'foo' } 如何使用jQuery将'foo'更改为'bar'？

943 javascript  jquery  css  jquery-selectors  pseudo-element 

在网上的无数地方，我看到了建议在JavaScript之前加入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 = @http_path_info array = @http_query_string.split("&").map{|s| s.split("=")}.flatten parsed = Hash[*array] delay = parsed["delay"].to_i / 1000.0 jsdelay = parsed["jsdelay"].to_i delay = 5 …

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> </div> </div> 运行代码段隐藏结果展开摘要 Bootstrap中的网格系统使用float: left，而不是display:inline-block，因此该属性vertical-align不起作用。我尝试使用margin-top进行修复，但是我认为这对于响应式设计不是一个好的解决方案。

889 html  css  twitter-bootstrap  twitter-bootstrap-3 

我正在使用jQuery更改CSS，并且希望删除基于输入值添加的样式： if(color != '000000') $("body").css("background-color", color); else // remove style ? 我怎样才能做到这一点？ 请注意，只要使用颜色选择器选择了颜色（即，当鼠标移至色轮上时），以上行就会运行。 第二注：我不能这样做，css("background-color", "none")因为它将从CSS文件中删除默认样式。 我只想删除jQuerybackground-color添加的内联样式。

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