更改容器內流體元素的背景顏色

如何更改嵌套在容器流體元素中的h3元素的背景顏色？更改容器內流體元素的背景顏色

我已經設置了整個容器流體的背景顏色，但是我希望h3元素具有不同的背景顏色。我想象H3在容器流體下面，但我無法弄清楚如何改變層次結構。

這裏是我的html：

<section class="container-fluid" id="portfolio"> 

<h3 id="portfolio-title">PORTFOLIO</h3>

而CSS：

.container-fluid { 
padding: 0 !important; 
} 

#portfolio-title { 
background-color: #2E3747; 
} 

#portfolio { 
background-color: #EFF0F0; 
}

感謝您的幫助！

來源

2017-03-17 sim

試試這個CSS

#portfolio { 
background-color: #EFF0F0; 
} 

#portfolio #portfolio-title { 
background-color: #2E3747 !important; 
}

我剛剛搬到組合起來，然後h3的向下，並使其重要

來源

2017-03-17 05:07:45 vkubre

不錯！它的工作，但我不明白它哈哈......爲什麼#portfolio需要包含在第二個CSS條目？ – sim

＃套件沒有必要，但它顯示它是＃組合標題的父母，所以它只是將目標標題放在#portfolio中，將#portfolio和#title向下移動實際上有所幫助，因爲瀏覽器逐行呈現CSS 。 – vkubre

讓我們試試這個代碼

#porfolio:not(#portfolio-title) { 
    background-color: #EFF0F0; 
} 



#portfolio-title { 
    background-color: #2E3747; 
}

選擇.container-fluid但不porfolio-title。
希望得到這個幫助。

來源

2017-03-17 05:00:55 Kramer

你的代碼有什麼錯it..this是去

方式

工作片斷

.container-fluid { 
 
padding: 0 !important; 
 
} 
 

 
#portfolio-title { 
 
background-color: blue; 
 
color: red; 
 
} 
 

 
#portfolio { 
 
background-color: green; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<section class="container-fluid" id="portfolio"> 
 

 
<h3 id="portfolio-title">PORTFOLIO</h3>

來源

2017-03-17 05:10:37 neophyte

更改容器內流體元素的背景顏色

回答

相關問題