全称セレクタ（アスタリスク）は継承を殺す

前置き

lightbox.js使っていて、キャプション設定しても出なかったんですが、文字が黒くて見えなかっただけでした。
なんで見えなくなっていたか調べたら、自前CSSの全称セレクタ（*）が悪さをしていたという話です。

検証

こういうdivの構造で

<div class="a">
  a
  <div class="b">
    b
  </div>
</div>

CSSをこう

1.css

.a {
  color: red;
}

結果：aもbも赤くなる。
子要素は親のスタイルを継承します。想定内の動きです。

でもこうすると

2.css

*{
  color: #000;
}
.a {
  color: red;
}

結果：aだけ赤くなる。
継承より*の方が強くなるようです。

まとめ

全称セレクタ（ユニバーサルセレクタともいう）は継承を上書きするみたいです。
※もちろん子要素に文字色が指定されていたらそちらが優先されます。
JavaScriptプラグイン用のCSSが正しく動作しないこともあるので、継承ありのプロパティはbodyとかに指定したほうがいいですね！
MDNでも全称セレクタの使用は推奨されてないです。
優先度や詳細度の問題かと思っていたけど違ったようで、無駄に悩んでしまった…。