英文:
How can I make different backgrounds for multiple selectors in CSS?
问题
我有一个包含五个部分的
。我想为每个部分设置不同的背景颜色。
标签中都没有类。CSS 中是否有其他方法可以实现这一点？
通常，你可以为每个部分创建一个类：
CSS
.b1 {background-color: blue;}
.b2 {background-color: red;}
.b3 {background-color: black;}
.b4 {background-color: beige;}
.b5 {background-color: blue;}
HTML
<div>
<section class="b1">Block 1</section>
<section class="b2">Block 2</section>
<section class="b3">Block 3</section>
<section class="b4">Block 4</section>
<section class="b5">Block 5</section>
</div>
但我最近看到别人的HTML，每个部分都有不同的颜色，但在任何
尝试在每个HTML标签中不使用类创建不同的背景颜色。
英文:
I have a div with five sections in it. I'd like to have different background colors for each one.
Usually, one would create a class for each:
CSS
.b1 {background-color: blue;}
.b2 {background-color: red;}
.b3 {background-color: black;}
.b4 {background-color: beige;}
.b5 {background-color: blue;}
HTML
<div>
<section class="b1">Block 1</section>
<section class="b2">Block 2</section>
<section class="b3">Block 3</section>
<section class="b4">Block 4</section>
<section class="b5">Block 5</section>
</div>
But I recently saw someone else's HTML that had different colors for each one, yet there were no classes in any of the section tags. Is there some other way of doing this in CSS?
Tried to create different background colors for each section without classes in each HTML tag.
答案1
得分: 4
我不明白为什么您想要避免使用类。话虽如此，如果您的部分具有相同的父元素，您可以使用 :nth-of-type 伪类：
section:nth-of-type(1) {
background-color: lemonchiffon;
}
section:nth-of-type(2) {
background-color: darksalmon;
}
section:nth-of-type(3) {
background-color: aquamarine;
}
section:nth-of-type(4) {
background-color: papayawhip;
}
section:nth-of-type(5) {
background-color: hotpink;
}
<div>
<section>Block 1</section>
<section>Block 2</section>
<div>this is not a section</div>
<section>Block 3</section>
<section>Block 4</section>
<section>Block 5</section>
</div>
<details>
<summary>英文:</summary>
I don't see why you want to avoid classes. That being said, if your sections have same parent you can use [`:nth-of-type`][1] pseudo class:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
section:nth-of-type(1) {
background-color: lemonchiffon;
}
section:nth-of-type(2) {
background-color: darksalmon;
}
section:nth-of-type(3) {
background-color: aquamarine;
}
section:nth-of-type(4) {
background-color: papayawhip;
}
section:nth-of-type(5) {
background-color: hotpink;
}
<!-- language: lang-html -->
<div>
<section>Block 1</section>
<section>Block 2</section>
<div>this is not a section</div>
<section>Block 3</section>
<section>Block 4</section>
<section>Block 5</section>
</div>
<!-- end snippet -->
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
</details>
# 答案2
**得分**: 1
使用JavaScript，您可以访问子元素并添加颜色，这是一个示例：
```javascript
let container = document.getElementById('itemsContainer');
let childItems = Array.from(container.children);
childItems.forEach(function (element, index) {
if (index == 0) {
element.style.backgroundColor = 'blue';
}
if (index == 1) {
element.style.backgroundColor = 'red';
}
/*
如果.... n 次
*/
});
为了使其更清晰，您可以将颜色值保存在数组中，然后这样做：
let container = document.getElementById('itemsContainer');
let childItems = Array.from(container.children);
let colorsValue = ['blue', 'red', 'black', 'beige', 'blue'];
childItems.forEach(function (element, index) {
element.style.backgroundColor = colorsValue[index];
});
英文:
Using javascript, you access to the child elements and add the color, there is an example:
let container = document.getElementById('itemsContainer');
let childItems = Array.from(container.children);
childItems.forEach(function (element, index) {
if (index == 0) {
element.style.backgroundColor = 'blue';
}
if (index == 1) {
element.style.backgroundColor = 'red';
}
/*
if .... n times
*/
});
To makeit more clean, you can save the colors value in an array and do this:
let container = document.getElementById('itemsContainer');
let childItems = Array.from(container.children);
let colorsValue = ['blue', 'red', 'black', 'beige', 'blue'];
childItems.forEach(function (element, index) {
element.style.backgroundColor = colorsValue[index];
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
- 本文由 huangapple 发表于 2023年5月18日 05:08:23
- 转载请务必保留本文链接：https://go.coder-hub.com/76276210.html
- css
- html
评论