html - 我无法从CSS进入 body

我已经在Codepen上建立了这个致敬页面。并且我添加了Bootstrap。然后我无法从CSS访问身体。您可以在这里查看我的代码。

body {
  background-color: black;
}

.header {
  font-size: 100px;
  font-family: "Libre Barcode 39 Text";
  text-align: center;
}

.mainPicture {
  width: 95px;
}

<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container-fluid">
  <h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>

最佳答案

引导程序样式覆盖了您的样式。使用！important覆盖引导程序样式。有关更多详细信息，请检查这些用法

html>body {
  background-color: black;
}

.header {
  font-size: 100px;
  font-family: "Libre Barcode 39 Text";
  text-align: center;
}

.mainPicture {
  width: 95px;
}

<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container-fluid">
  <h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>

替代解决方案：-

使用html > body增加特异性，这将是一个好习惯

html > body {
  background-color: black;
}

.header {
  font-size: 100px;
  font-family: "Libre Barcode 39 Text";
  text-align: center;
}

.mainPicture {
  width: 95px;
}

<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container-fluid">
  <h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>