div標籤中的不同背景顏色

-1

我想知道是否有更好的方法來設置CSS中的4種不同的背景顏色。我必須做出以下設置：div標籤中的不同背景顏色

是否有一個更清潔，漂亮的代碼，我可以做這個我做的旁邊，或者這是做的唯一途徑？我的意見後，代碼看起來真的很醜。

<div class="bg1"></div> 
<div class="bg2"></div> 
<div class="bg3"></div> 
<div class="bg4"></div> 



.bg1 { 
    background-color: blue; 
} 
.bg2 { 
    background-color: red; 
} 
.bg3 { 
    background-color: green; 
} 
bg4 { 
    background-color: purple; 
}

來源

2017-01-24 KrMa

使用'background-color'而不是'color' –

對於其中一個，'color'在這種情況下不會做任何事情，因爲它指的是文本的顏色。你正在尋找'背景顏色'。另外，我不確定你甚至在問什麼。有沒有辦法讓你的div是一定的顏色，沒有指定顏色？ ...頁面是否會「猜測」顏色？ – Santi

您將不會得到比指定四個背景顏色規則更簡明 – j08691

Personnaly，我會做到這一點：

<div class="square square-blue"></div> 
<div class="square square-red"></div> 
<div class="square square-green"></div> 
<div class="square square-purple"></div>

和CSS：

.square{ 
    border: 1px solid black; // and all params 
} 
.square-blue { 
    background-color: blue; 
} 
.square-green { 
    background-color: green; 
} 
.square-purple { 
    background-color: purple; 
} 
.square-red { 
    background-color: red; 
}

以獲得更高的可讀性（BEM的一個小用法 - http://getbem.com/introduction/）。

來源

2017-01-24 21:44:21

，你可以添加樣式=「背景色：＃123456」到每一個DIV，如果你真的不得不因爲模板引擎的一些限制（我不能想象這樣的情況），但什麼在上下文中你已經很好。

編輯：我的意思是，如果你想有，說一個彩虹的效果。在Perl/TemplateToolkit中，我可以看到類似於：

[% for ($code = 0; $code < $whatever_max_hex_is'; $code++) { %] 
<div style='background-color: [%$code%]'></div> 
[%END%]

類似的東西。完全沒有經過測試，但我相信你會得到漂移。

來源

2017-01-24 21:42:53 WeeDom

，您可以利用第n個孩子/ n次的型這裏

檢查下面的代碼片段的。

.container div:nth-child(1) { 
 
    background: blue; 
 
} 
 
div:nth-of-type(2) { 
 
    background: red; 
 
} 
 
div:nth-of-type(3) { 
 
    background: green; 
 
} 
 
div:nth-of-type(4) { 
 
    background: purple; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.container div { 
 
    width: 100vw; 
 
    height: 50px; 
 
}

<div class="container"> 
 
    <div class="bg1"></div> 
 
    <div class="bg2"></div> 
 
    <div class="bg3"></div> 
 
    <div class="bg4"></div> 
 
</div>

希望它可以幫助

來源

2017-01-24 21:43:52 Geeky

div標籤中的不同背景顏色

回答

相關問題