我無法從css訪問正文

我在Codepen上構建了這個致敬頁面。我加了Bootsrap。然後我無法從css訪問body。你可以在這裏查看我的代碼。我無法從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>

來源

2017-09-23 Lhagvasuren Zagdsuren

你是否嘗試在codepen之外？就像在codepen中一樣，不需要有身體 –

引導的風格是壓倒你的風格。使用！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>

來源

2017-09-23 07:42:39 jafarbtech

我無法從css訪問正文

回答

相關問題