css使用中遇到的一些坑

[AlexZ33]

无法修改颜色的 <a> 标签

有一天，我想重新定义 标签的样式，因为 HTML5 里 href 不再是必要属性，所以我想让有 href 和没有 href 的元素使用不同的样式，于是写了下面一段代码

<style>
  a {
    color: #333;
    text-decoration: none;
  }
  a[href] {
    color: #00cccc;
    text-decoration: underline;
  }
</style>

<a href="baidu.com">这是一个有 href 的 &lt;a&gt; 标签</a>
<a>这是一个没有 href 的 &lt;a&gt; 标签</a>

https://codepen.io/AlexZ33/pen/VwwqXYz

测试下，没啥问题，然后我就很开心的用它来初始化 a 标签了。

直到有一天，我想把某个链接中的文字改成红色，然后我加了一段代码

<style>
  .red {
    color: red;
  }
</style>

<a href="baidu.com" class="red">这是一个应该显示成红色的 &lt;a&gt; 标签</a>

但是它居然没有任何变化！！！demo在此，大家有看出来问题吗？

大家可以先思考一下。这个问题和字体、文本没啥关系，但我觉得这个坑是有必要提一下的。

最后回答下最开始的问题，这跟选择器的特殊性有关，参考选择器特殊性的计算方法
选择器中的每个元素增加的特殊性为 0, 0, 0, 1
而每个类和每个属性选择增加的特殊性都是 0, 0, 1, 0

因此选择器 a 的特殊性为 0, 0, 0, 1
选择器 a[href] 的特殊性为 0, 0, 1, 1
而选择器 .red 的特殊性只有 0, 0, 1, 0
.red 的特殊性并没有超过 a[href]，因此无法把 a[href] 的样式覆盖掉。

这就是权重问题

[AlexZ33]

字体图标

如果大家有去了解过字体属性，那么就会知道 font-family 可以修改字体，例如改成宋体、黑体、楷体等。再进一步，如果我们的客户端上没有这种字体，那么我们还可以用 @font-face 引入一个 .ttf 之类字体库的文件，然后就可以在客户端上使用这种字体了。

那么，如果我们引入的字库中，既没有中英文，也没有标点符号，取而代之的是各种各样的图案呢？

恭喜你，你使用了一种叫字体图标的技术，例如 Font Awesome 就是一套字体图标库，demo在此。

https://codepen.io/AlexZ33/pen/QWWzmdX

使用字体图标的好处如下：

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影者其它任何支持的效果。

[AlexZ33]

无法紧密包裹的图片

<style>
  div, img {
    border: 1px solid #333;
  }
</style>

<div>
  <img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="百度一下" height="100" />
</div>

只看代码的话，大家觉得包裹图片的 div 高度应该是多少呢？是 100px（哎我忘了算 border） 102px 吗？

然而并不是，在实际效果中，img 和 div 的底部会多出一条缝隙，那是因为文本的垂直对齐方式在作怪，可以看

默认时，文本是按照基线进行对齐的，图片和 div 底部的空隙则是为了留出空间放置文本基线以下的一截。因此换一种对齐方式就可以解决这个问题了。

当然，还有很多方法可以解决这个问题，其中一种就是 line-height: 0;，但是 line-height 能牵扯出来的问题实在太多了，有兴趣的同学可以读一下这篇文章：
css行高line-height的一些深入理解及应用

当然，能够把权威指南第7章，基本视觉格式化中，行内元素的那一节看一遍就更好了。有能力的同学还可以看看 W3C 中关于行高和垂直对齐的计算