如何在CSS中为多个选择器创建不同的背景?

huangapple go评论67阅读模式
英文:

How can I make different backgrounds for multiple selectors in 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,每个部分都有不同的颜色,但在任何

标签中都没有类。CSS 中是否有其他方法可以实现这一点?

尝试在每个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

&lt;div&gt;
   &lt;section class=&quot;b1&quot;&gt;Block 1&lt;/section&gt;
   &lt;section class=&quot;b2&quot;&gt;Block 2&lt;/section&gt;
   &lt;section class=&quot;b3&quot;&gt;Block 3&lt;/section&gt;
   &lt;section class=&quot;b4&quot;&gt;Block 4&lt;/section&gt;
   &lt;section class=&quot;b5&quot;&gt;Block 5&lt;/section&gt;
&lt;/div&gt;

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&#39;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:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    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;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;
      &lt;section&gt;Block 1&lt;/section&gt;
      &lt;section&gt;Block 2&lt;/section&gt;
      &lt;div&gt;this is not a section&lt;/div&gt;
      &lt;section&gt;Block 3&lt;/section&gt;
      &lt;section&gt;Block 4&lt;/section&gt;
      &lt;section&gt;Block 5&lt;/section&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


  [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(&#39;itemsContainer&#39;);
let childItems = Array.from(container.children);
childItems.forEach(function (element, index) {
    if (index == 0) {
        element.style.backgroundColor = &#39;blue&#39;;
    }
    if (index == 1) {
        element.style.backgroundColor = &#39;red&#39;;
    }
    /*
    if .... n times
    */
});

To makeit more clean, you can save the colors value in an array and do this:

let container = document.getElementById(&#39;itemsContainer&#39;);
let childItems = Array.from(container.children);
let colorsValue = [&#39;blue&#39;, &#39;red&#39;, &#39;black&#39;, &#39;beige&#39;, &#39;blue&#39;];
childItems.forEach(function (element, index) {
    element.style.backgroundColor = colorsValue[index];
});

huangapple
  • 本文由 发表于 2023年5月18日 05:08:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/76276210.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定