小编Jam*_*lly的帖子

根据字体权重和其他来源的MDN页面,font-weight: bolder使文本内容"一个字体权重比父元素更暗(在字体的可用权重中)."

我有一个测试页面,其中包含Google Fonts中的"Open Sans"字体,权重为300,400(又名"普通"),600,700(又名"粗体")和800.手动设置数字字体权重正如所料,但使用bolder似乎跳过字体权重600.

Firefox和Chrome对此达成一致,所以我可能误解了"一步"在这种情况下的含义.

这是一个用于测试的JSFiddle,以及我得到的结果的屏幕截图.

第一部分有手动数字font-weight设置.第二个嵌套div块用样式font-weight: lighter(按预期工作),第三个嵌套div块用font-weight: bolder; 这个显示了我想要了解的效果.

它看起来很简单。我要display:none;第一个button。我有两个具有相同的父类。出于某种原因，我无法弄清楚为什么我没有达到我想要的结果。

.main-content .cbToolBar:first-child button{
  display:none;
}

<div class="main-content">
  <span class="cbToolBar">
    <button class="cbButton"></button>
  </span>
  <span class="cbToolBar">
    <button class="cbButton"></button>
  </span>
</div>

我的选择有问题，但我不知道是什么。

谢谢。

我们有

<div class="xTable">
 <table>
  <tr>
   <td>
    <div class="xTable">
     <table>
      <tr>
       <td>
        <div class="xTable">
         <table>...</table>
        </div>
       </td>
      </tr>
     </table>    
    </div>
   </td>
  </tr>
 </table>
</div>

如何将自定义CSS样式应用于2nd div,仅应用于2nd div而不是1或3或更深？

没有办法添加额外的课程或IDS!Html是动态生成的,无法管理.

我会用

.xTable table .xTable

但这意味着第三和更深的div将受到影响.

没有ID!请仅限CSS选择器.

谢谢!

我在一组动画帧中循环遍历一组图像.有7个图像,从1-7循环完成动画.我需要这个动画无限循环,但我想知道哪个是最好的方法:

通过修改数组循环

/* Pull image from start of array. */
var image = frames.shift();
/* Process image. */
...
/* Add image back to end of array. */
frames.push(image );

循环使用计数器变量

/* Pull image by counter offset. */
var image = frames[counter];
/* Process image. */
...
/* Increment or reset counter value. */
counter + 1 === frames.length ? counter = 0 : counter = counter + 1;

有没有理由我选择一个而不是另一个？或者,有更好的方法吗？

我正在尝试使文本输入元素与提交输入元素的宽度相同,并且出于某种原因我正在努力解决这个问题.(我可能错过了一些非常明显的东西).

在Chrome,Opera,IE9和IE10中,这可以解决问题:

input {
    box-sizing:border-box;
}

但是在Firefox中,这并不能解决问题,因为文本输入仍然比提交输入长(并且最终比任何声明的宽度都长).

Chrome,Opera,IE9和IE10:

Firefox问题:

请注意,我在每个周围添加了1px边框,以使差异更清晰一些.

这是一个JSFiddle示例来说明这一点.请注意,我在Windows 7上使用的是最新版本的Chrome,Opera和Firefox.

我该怎么做才能确保所有浏览器的大小相同？

我有以下文字：

<span class="page-number">42</span>

我想创建一个伪元素，如下所示：

<span class="page-number">42</span>

这样伪元素的内容就是元素的文本，在本例中为 42。我可以通过一些技巧来做类似的事情吗？

我正试图用伪元素做一些技巧.

我正在展示一个排名,我希望冠军能够在胜利者的顶部展示,在图像所在的角落倾斜45度.但是图像太大了,有没有办法让我重新调整伪元素上添加的图像？

我只有这个div:

<div class='box'></div>

有了这个CSS:

.box {
    width: 50px;
    height: 50px;
    float: left;
    border: 1px solid #000;
    position:absolute;
    top: 100px;
    left: 100px;
}

.box::after{
    content: url(URL_OF_IMAGE);
    position: absolute;
    top: -10px;    
    right: -10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

我在JSFiddle上做了一个例子:http://jsfiddle.net/GEtds/

我试图改变height和width,但没有效果.

是否可以根据浏览器窗口的高度(而不是使用媒体查询的宽度)更改CSS font-size和line-height标题？

我有一个带有.features类的主div,在这个div中我有两个盒子,每个盒子的高度设置为160px,宽度不同.在两个框的末尾和主div之间有一个神秘的填充,如下面的屏幕截图所示:

填充大约是5px - 如果可能的话我想删除这个填充.我尝试添加保证金:0; 和填充:0; 到主要的div以及两个内盒但它没有用.

这是页面这一部分的html:

<div class="features">
    <div class="list-items"></div>
    <div class="screenshot-box"></div>
</div>

css:

 .features {
    width: 980px;
    margin: auto;
    margin-top: 25px;
    background-color: lightblue;
}

.list-items {
    width: 280px;
    height: 160px;
    display: inline-block;
    background-color: red;
}

.screenshot-box {
    width: 583px;
    height: 160px;
    float: right;
    padding-bottom: 0;
    display: inline-block;
    background-color: red;
}

在以下代码段中，我试图显示一个无序列表，其中的项目符号font-size要比关联<li>元素的要大。但是，在第二个元素的情况下，项目符号点与图像的上角对齐。有没有一种方法可以强制项目符号点与<li>元素的中心（在本例中为<span>）对齐？

li{
	font-size: 24px;
}

li span{
	font-size: 14px;
}

.table-display{
	display: table-cell;
	vertical-align: middle;
}

<ul>
    <li>
        <span>
        Welcome to the help page
        </span>
    </li>
    
    <li>
        <span>
            <div class="table-display">
                <img src="http://images.clipartpanda.com/phone-icon-molumen_phone_icon.png" alt="phone icon" height="64" width="64">
            </div>
		    <div class="table-display">
		        The Help Desk<br/>
			    phone number is :<br/>
                <span style="font-weight:bold;">(+01)2 34 56 78 90</span>
            </div>
        </span>
    </li>
</ul>