Tag: CSS
第一个元素与类的CSSselect器
我有一堆red类名的元素： <p class="red"></p> <div class="red"></div> 我似乎无法使用下面的CSS规则selectclass="red"的第一个元素： .red:first-child{ border:5px solid red; } 这个select器有什么问题，我该如何纠正？ 更新 ： 感谢评论，我发现这个元素必须是它的父类的第一个孩子，而不是我所拥有的。 我有以下结构： <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> 这个规则在评论中提到失败： .home .red:first-child{ border:1px solid red; } 我怎样才能把第一个孩子的目标定为red ？
保持div与CSS的纵横比
我想创build一个div，可以改变宽度/高度随着窗口宽度的变化。 有没有任何CSS3的规则，可以让高度根据宽度改变， 同时保持其纵横比 ？ 我知道我可以通过JavaScript来做到这一点，但我宁愿只使用CSS。
什么是clearfix？
最近我正在浏览一些网站的代码，并看到每个<div>都有一个类的clearfix 。 经过Google的快速search，我了解到它有时候是IE6的，但实际上是一个clearfix？ 你可以提供一个带有clearfix的布局的例子，相比于没有clearfix的布局吗？
我如何使用CSS给文本或图像一个透明的背景？
是否有可能仅使用CSS来使元素的background变为半透明，但是元素的内容（文本和图像）是不透明的？ 我希望在不将文字和背景作为两个单独元素的情况下完成此任务。 尝试时： p { position: absolute; background-color: green; filter: alpha(opacity=60); opacity: 0.6; } span { color: white; filter: alpha(opacity=100); opacity: 1; } <p> <span>Hello world</span> </p> 看起来孩子的元素受到了父母的不透明，所以opacity:1与父母的opacity:0.6有关。
我怎样才能使Bootstrap列高度相同？
我正在使用Bootstrap。 我怎样才能使三列同一高度？ 这是一个问题的截图。 我希望蓝色和红色的柱子与黄色柱子的高度相同。 这里是代码： <link href="../../../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>
我可以使用什么“clearfix”方法？
我有一个古老的问题包装一个双列布局。 我的侧边栏是浮动的，所以我的容器div无法包裹内容和边栏。 <div id="container"> <div id="content"></div> <div id="sidebar"></div> </div> 似乎有很多方法来修复Firefox中的清除错误： <br clear="all"/> overflow:auto overflow:hidden 在我的情况下，唯一似乎正常工作的是<br clear="all"/>解决scheme，这有点<br clear="all"/> 。 overflow:auto给我讨厌的滚动条和overflow:hidden肯定有副作用。 另外，IE7显然不应该因为它的错误行为而遭受这个问题，但是在我的情况下它和Firefox一样。 目前可用的哪种方法是最强大的？
如何禁用文本select突出显示使用CSS？
对于像button（例如，堆栈溢出页面顶部的问题 ， 标签 ， 用户等）或选项卡那样的锚点，如果用户意外地select文本，是否有CSS标准方法来禁用突出显示效果？ 我意识到这可以通过JavaScript来完成，而且一些Googlesearch只能得到Mozilla-only -moz-user-select选项。 有没有符合标准的方法来完成这个CSS，如果不是，什么是“最佳实践”的方法？
如何创build网格/瓷砖视图？
例如，我有一些类.article，我想查看这个类作为网格视图。 所以我应用了这种风格： .article{ width:100px; height:100px; background:#333; float:left; margin:5px; } 这种风格将使.article看起来平铺/网格。 这是固定的高度工作正常。 但是，如果我想将高度设置为自动（根据其中的数据自动拉伸），网格看起来很讨厌。 我想要这样的看法：
我如何垂直居中文本与CSS？
我有一个包含文本的div元素，我想将这个div的内容垂直居中。 这是我的div风格： #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #FFF; text-align: center; } <div Id="box"> Lorem ipsum dolor sit </div> 什么是最好的方法来做到这一点？
如何垂直居中所有浏览器的div？
我想用CSS垂直居中div。 我不想要表或Javascript，但只有纯CSS。 我find了一些解决scheme，但都缺less对Internet Explorer 6的支持。 <body> <div>Div to be aligned vertically</div> </body> 如何在所有主stream浏览器（包括Internet Explorer 6）中垂直居中div？
