Question

所以我想在上面的codepen布局中选择第3和第4个Box标题，并以不同的方式设置它们。我想使用像nth-child这样的伪选择器来完成这个，而不是使用特定的类，id或jquery。

这就是我最终的结果，我知道为什么它不起作用，因为它试图找到div的nth-child而不是.btn_title类的nth-child

div.btn_title:nth-child(3) {
    border: 4px solid #333;
    color: #b1b3b3;
}

所以我的问题是，你如何定位我名单中的第3和第4个div？

HTML

<ul>
<li>
  <div id="box1" class="web_btn"></div>
  <div class="btn_title">Box 1</div>
</li>
<li>
  <div id="box2" class="web_btn"></div>
  <div class="btn_title">Box 2</div>
</li>
<li>
  <div id="box3" class="web_btn"></div>
  <div class="btn_title">Box 3</div>
</li>
<li>
  <div id="box4" class="web_btn"></div>
  <div class="btn_title">Box 4</div>
</li>

Answer 1

如果我理解正确：http://codepen.io/anon/pen/khDgE

试试这个：

li:nth-child(2) .btn_title, li:nth-child(3) .btn_title {
   border: 4px solid #333;
   color: #b1b3b3;
}

Answer 2

您希望在div.btn_title内设置li的样式，而不是每个div.btn_title内的第3 li个样式。所以你需要以下的CSS选择器：

li:nth-child(3) div.btn_title {
    /* your CSS rules go here */
}

执行以下操作：

找到第3个列表项（<li>）
在该列表项中，找到<div>与班级btn_title。

编辑：我发现你想要定位第3和第4 li，所以你的选择器应该是：

li:nth-child(3) div.btn_title,
li:nth-child(4) div.btn_title {
    /* your CSS rules go here */
}

与上面基本相同，但同时针对第3和第4个列表项。

Answer 3

nth-child针对兄弟姐妹 - 在您的情况下，它会尝试在每个li 中找到第三个元素。要解决这个问题，请在li上使用nth-child（即找到第3个li），然后为其中的孩子设置样式。

li:nth-child(3) div.btn_title { border: 4px solid #333; color: #b1b3b3; }

这是一个证明这一点的小提琴。 http://jsfiddle.net/wVXdX/

Answer 4

对于他们两人：

li:nth-child(3) div.btn_title,
li:nth-child(4) div.btn_title {
    border: 4px solid #333;
    color: #b1b3b3;
}

Answer 5

http://codepen.io/anon/pen/yGsfI

检查代码和示例，点击网址

<div>
  <ul id="web_sync_options">
<li>
  <div></div>
  <div>Box 1</div>
</li>
<li>
  <div></div>
  <div>Box 2</div>
</li>
<li>
  <div></div>
  <div>Box 3</div>
</li>
<li>
  <div></div>
  <div>Box 4</div>
</li>
</ul>
</div>

Answer 6

CSS

body {
  font-family: arial;
}

#web_sync_options > li {float: left; list-style: none;}
#web_sync_options > li {margin: 0 10px 10px 0;}
#web_sync_options > li > div {margin: 0 0 10px 0; width: 200px; height: 90px; border: 2px solid #e3e3e3; cursor: pointer;}
#web_sync_options > li div:nth-child(2) {height: 20px;}
#web_sync_options > li:nth-child(2) div:nth-child(2) {background:#FF0;}
#web_sync_options > li:nth-child(3) div:nth-child(1), li:nth-child(4) div:nth-child(1) {background: #F00;}
#web_sync_options > li div:nth-child(2) {text-align: center;}

如何选择第3和第4里的第二个div

6 个答案: