Question

我正在这个前端运行流体块布局我正在努力。我想将div的背景颜色设置为某个类，或者将内部段落标记设置为从重复的5到8个颜色样本中获取的颜色。例如：红色，绿色，蓝色，粉红色，黄色，红色，绿色，蓝色，粉红色，黄色......

最初我认为使用nth-child伪选择器通过类/ id选择添加一些uglification会有点直接，但是元素嵌套在几个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类的元素的后代。

你可以尝试：

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

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

2 个答案: