0
私はこのプロジェクトで疑似クラス(img:nth-child)を使用しようとしていますが、動作させることができません（これはCSSの最後の行です）。ちょうどそれがどのように動作するかを見るために単純な関数を使用しています。計画は、この擬似クラスを実装して、5番目のアイテムごとに右ボーダーを追加することです。あなたのセレクタが.nav li ul li .centerText要素内に第五IMGを選択している、今jsFiddlenth-child疑似クラスが5番目の要素を選択できません
<!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)===========================*/