Question

我正在尝试在此项目中使用伪类( img:nth-child)，但我无法使其工作（它是css-part中的最后一行）。现在我只是使用一个简单的函数来看看它是如何工作的。计划是实现这个伪类，每隔5个项添加一个右边框。您可以在此处查看工作代码：jsFiddle

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>module e2</title>
<link href="css/e2.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div class"main">      
        <ul class="nav">
             <li><a class="mainNav" id="car_1" href="#"><p><img class="mainMenuImg" src="img/singel_car.png"  />singelCars<img class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>

                          <ul >
                            <li class="borders"><a href="#" class="centerText  "><img class="" src="http://placehold.it/178x108/" /> <p class=""> Megane coupe cabriolet</p></a></li>
                            <li><a href="#" class="centerText"> <img class=""src="http://placehold.it/179x108/" /><p class=""> Megane  </p></a></li>
                             <li><a href="#" class="centerText"> <img src="http://placehold.it/179x108/" /><p class=""> Megane  cabriolet</p></a></li>
                            <li><a href="#" class="centerText"> <img src="http://placehold.it/179x108/" /><p class=""> Megane  cabriolet</p></a></li>
                            <li><a href="#" class="centerText"> <img src="http://placehold.it/179x108/" /><p class=""> Megane coupe </p></a></li>

                    </ul>

             </li>

             <li><a class="mainNav" id="car_2" href=" #"><p><img class="mainMenuImg" src="img/items_car.png" />varebilder<img  class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
              </li>


              <li><a class="mainNav" id="car_3" href="#"><p><img class="mainMenuImg" src="img/ze.png" />z.e<img  class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
              </li>

              <li><a class="mainNav" id="security" href="#"><p>security </p></a>              
              </li>                
              <li><a class="mainNav" id="services" href="#"><p>service</p></a>
              </li>
              <li><a class="mainNav" id="aboutRenault" href="#"><p>about</p></a>
             </li>
              <li><a class="mainNav" id="more" href="#"><p>more<img  class="arrowMargin" src="img/maiNav_arrowDown.png" /></p></a>
              </li>


        </ul> <!-- ends #nav -->

    </div> <!-- ends main -->





</body>
</html>



-------------------------------------



    body { margin: 0; font-size: 12px; line-height: 1.231; font-family:Arial, Helvetica, sans-serif;}


    /*
     * 1. Improve image quality when scaled in IE7: h5bp.com/d
     * 2. Remove the gap between images and borders on image containers: h5bp.com/e
     */

    img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }


    /* =============================================================================
       main
       ========================================================================== */
    .main img{ margin: 0;}
    .main{ margin: auto; width: 900px;/* background:url(http://placehold.it/900x500/e67c78);*/}
    .nav{ margin:auto; padding:0; list-style-type:none; list-style-position:outside; float: left; background: #CCC;  }
    .nav li a, .nav li{ float: left;}
    .nav li{ position:relative; list-style: none;}
    .nav li p{ margin-top: 12px; }
    .nav li a{ text-decoration: none; background: #2a2a2a;  color: #FFF;  }    

    /*.main #nav .centerText img{ border-left: 1px solid black; border-bottom: 1px solid black;  }*/
    /*=====================================================================*/
    .main a.mainNav, a.mainNav:link, a.mainNav:visited {display: block; height: 49px; background: #282828; border-right: 1px solid #797979; margin-top:0px; text-align:center; color: #fff; text-transform: uppercase;  line-height:25px; overflow:hidden; float: left;}



    .nav #car_1{ width: 190px; margin-left: 0px; }
    .nav #car_2{ width: 190px;  }
    .nav #car_3{ width: 106px; color: #1f8b95; }
    .nav #security{ width: 147px;  }
    .nav #services{ width: 69px;  }
    .nav #aboutRenault{ width: 100px;  }
    .nav #more{ width: 92px; border-right: none; background:#f7b100; }

    .nav li .arrowMargin { margin-left: 5px;}


        /*main menu images/cars*/
    .nav li p .mainMenuImg{  margin-right: 12px; }



    /*centering text on images*/

    .main .nav .centerText p{ position: absolute;  top: 70px; margin-left: 20px; display: solid; font-family: 'Yanone Kaffeesatz', Arial; font-size: 1.2em; text-transform: uppercase; letter-spacing: 0.5px; color: black;}


        /*main a-tags*/


        /* Improve readability when focused and hovered in all browsers: h5bp.com/h */
    a:hover, a:active { outline: 0; }

    a.mainNav:hover {color:#000; background:#fff;}
    a #more:hover{color:#000; background:#f7b100;}





    /*==================UNDER LEVELS======================================*/

    .nav li ul{ display: none;/** switch: on/off  to show the underlevel*/ position:absolute; left:0; top: 100%; margin: 0; padding: 0; width: 900px;}
    .nav li:hover ul{ display: block;}

    .main .nav li ul li, .nav li ul li a{ float: left; display: inline-block; border-left: 1px solid black; border-bottom:1px solid black; }

    .nav li ul li .centerText img:nth-child(5){ border: 1px solid red; !important;  } /* THIS LINE DOEST WORK ? DONT KNOW WHY? */


    /*==================styling images (li-elements)===========================*/

Answer 1

现在，您的选择器正在选择.nav li ul li .centerText元素中的第五个img。每个图像中只有一个图像，因此根本不会选择任何图像。您需要将其更改为.nav li ul li:nth-child(5n+1) .centerText img。这将在该导航菜单中选择每五分之一li，然后将边框添加到其中的图像。

nth-child伪类无法选择每个第5个元素

1 个答案: