从重复色样设置嵌套元素的背景色

Question

我正在处理的这个前端有一个流体块布局运行。我想将 div 的背景颜色设置为某个 class 或其内部段落标记的颜色，该颜色取自重复的五到八个色样。示例：红色、绿色、蓝色、粉色、黄色、红色、绿色、蓝色、粉色、黄色……

最初我认为使用 nth-child 伪选择器并通过 class/id 选择添加一些丑化会有点直截了当，但是元素嵌套在几个 div 中并且我无法让它工作。我不确定我是否应该在这里使用 javascript，显然我宁愿用 CSS 完成它，因为我的 javascript 很弱，但我真的不如果有人可以帮助我解决问题，请介意任何一种方式。我环顾四周，我了解 http://jsfiddle.net/eudLg58p/ 这样的示例是如何工作的，但我就是无法获得选择嵌套 div 的额外步骤。可能我找错树了。

这是标记..

<div id="bhe-body">

    <div id="breadcrumbs">
        <div>
            <h1 class="font-purple font20 center">Home / Sample / Sample Directory</h1>
        </div>

        <div>
            <img id="back-arrow" src="mcwh-img/back-arrow.png">
            <img id="home-button" src="mcwh-img/home-icon.png">
        </div>
    </div>



    <a href="#">
        <div class="bhe-icon q" id="">
            <div class="icon-type"></div>
        </div>
    </a>

    <a href="#">
        <div class="bhe-icon" id="">
            <div class="icon-type"></div>
            <p class="">Directory two</p><!-- color needed here -->
        </div>
    </a>

    <a href="#">
        <div class="bhe-icon" id="">
            <div class="icon-type"></div>
            <p class="">Directory three</p><!-- color needed here -->
        </div>
    </a>

    <a href="#">
        <div class="bhe-icon" id="">
            <div class="icon-type dir"></div>
            <p class="">Directory four</p><!-- color needed here -->
        </div>
    </a>

    <a href="#">
        <div class="bhe-icon" id="">
            <div class="icon-type dir"></div>
            <p class="">Directory five</p><!-- color needed here -->
        </div>
    </a>

    <a href="#">
        <div class="bhe-icon" id="">
            <div class="icon-type dir"></div>
            <p class="">Directory six</p><!-- color needed here -->
        </div>
    </a>

    <a href="#">
        <div class="bhe-icon" id="">
            <div class="icon-type dir"></div>
            <p class="">Directory seven</p><!-- color needed here -->
        </div>
    </a>

    <a href="#">
        <div class="bhe-icon" id="">
            <div class="icon-type dir"></div>
            <p class="">Directory eight</p><!-- color needed here -->
        </div>
    </a>

    <a href="#">
        <div class="bhe-icon" id="">
            <div class="icon-type dir"></div>
            <p class="">Directory nine</p><!-- color needed here -->
        </div>          
    </a>


    <a href="#">
        <div class="bhe-icon triangle-border-1" id="">

            <div class="icon-type go-back">
                <img id="back-arrow-lower" src="mcwh-img/back-arrow-white.png">
            </div>

        </div>          
    </a>


    <a href="#">
        <div class="bhe-icon triangle-border-2" id="">

            <div class="icon-type home">
                <img src="mcwh-img/home-icon-white.png">
            </div>

        </div>          
    </a>

</div>

..这是我的 CSS...

.icon-type{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
}


#bhe-body .icon-type p:nth-child(5n + 1){
  color: pink;
}

#bhe-body .icon-type p:nth-child(5n + 2){
  color: red;
}

#bhe-body .icon-type p:nth-child(5n + 3){
  color: green;
}

#bhe-body .icon-type p:nth-child(5n + 4){
  color: orange;
}

#bhe-body .icon-type p:nth-child(5n + 5){
  color: purple;
}

我的直觉是我不完全理解伪选择器的工作原理，它可能不是处理此任务的最有效方法。

谢谢，任何帮助将不胜感激:)

Answer 1

不是那样足球，像这样：https://jsfiddle.net/eudLg58p/1/

/* 1, 6, 11 ... */
section:nth-of-type(5n - 4) { 
    background-color: red;
}

/* 2, 7, 12 ... */
section:nth-of-type(5n - 3) {
    background-color: orange;
}

/* 3, 8, 13 ... */
section:nth-of-type(5n - 2) {
    background-color: blue;
}

/* you get the point ... */
section:nth-of-type(5n - 1) {
    background-color: green;
}

section:nth-of-type(5n - 0) {
    background-color: gray;
}

（对于热闹的足球参考：https://www.youtube.com/watch?v=T-AA3lk53DA&t=54）

Answer 2

nth-child 选择器适用于同父异母的兄弟姐妹。 <p> 元素不是兄弟，但 <a> 元素是。此外，<p> 元素不是 icon-type class.

元素的后代

你可以试试：

#bhe-body > a:nth-child(5n + 1) > .bhe-icon >  p {
  color: pink;
}

但是由于 <div id="breadcrumbs"> 元素也是 <a> 元素的兄弟元素，您可以改用 nth-of-type 选择器。它类似于 nth-child 选择器，但在对兄弟进行编号时仅考虑相同类型的元素。

#bhe-body > a:nth-of-type(5n + 1) > .bhe-icon >  p {
    color: pink;
}

从重复色样设置嵌套元素的背景色

Set the background color of nested elements from a repeating color swatch

javascript

jquery

html

css

frontend