CSS如何找到子元素？

Question

请考虑以下代码：

<h2>
  Working example
</h2>
<div class="test">
  <button>FirstChild (Yellow)</button>
  <button>Middle</button>
  <button>Middle</button>
  <button>LastChild (Red)</button>
</div>

<div class="test">
  <h2>
  Not working example - no DIVs
  </h2>
  <button>FirstChild (Yellow)</button>
  <button>Middle</button>
  <button>Middle</button>
  <button>LastChild (Red)</button>
</div>

<div class="test">
  <h2>
  Not working example - Divs
  </h2>
  <div>
    <button>FirstChild (Yellow)</button>
  </div>
  <div>
    <button>Middle</button>
  </div>
  <div>
    <button>Middle</button>
  </div>
  <div>
    <button>LastChild (Red)</button>
  </div>
</div>

以下CSS：

.test button:first-child {
  background: yellow;
}

.test button:last-child {
  background: red;
}

.test button:not(:last-child):not(:first-child) {
  background: cyan;
}

结果：

为什么我的CSS如果没有找到子按钮元素，如果它在div中或在中间有另一个元素（h2）？测试div中没有​​其他按钮元素。

如何使CSS考虑具有正确行为的3种情况（工作示例）？

JSFiddle here

Answer 1

.test button:first-child这适用于第一个但由于.test的第一个孩子是h2而不是按钮

解决方案：

订单在CSS中很重要，所以首先将.test下的所有按钮设置为绿色，然后将第一个/最后一个设置为它们的颜色。

你应该使用first-of-type和last-of-type来定位兄弟姐妹中的第一个类型（按钮或div），或者兄弟姐妹中的最后一个，如果你不确定兄弟姐妹，你应该读到这个：

  

相邻的兄弟选择器

     

https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

＆＃13;

＆＃13;

.test button {
  background: green;
}

.test > button:first-of-type,
.test div:first-of-type button {
  background: yellow;
}

.test > button:last-of-type,
.test div:last-of-type button {
  background: red;
}

＆＃13;

<h2>
  Working example
</h2>
<div class="test">
  <button>FirstChild (Yellow)</button>
  <button>Middle</button>
  <button>Middle</button>
  <button>LastChild (Red)</button>
</div>

<div class="test">
  <h2>
    Not working example - no DIVs
  </h2>
  <button>FirstChild (Yellow)</button>
  <button>Middle</button>
  <button>Middle</button>
  <button>LastChild (Red)</button>
</div>

<div class="test">
  <h2>
    Not working example - Divs
  </h2>
  <div>
    <button>FirstChild (Yellow)</button>
  </div>
  <div>
    <button>Middle</button>
  </div>
  <div>
    <button>Middle</button>
  </div>
  <div>
    <button>LastChild (Red)</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

显然你误解了:last-child，其余的意思是什么以及如何运作。它不是按钮的内容，而是一组子元素中的最后一个元素。您的使用不正确。

您可以尝试.test div:last-child button {color:red;}作为示例。

Answer 3

找到子元素

public class ParentActicvity extends AppCompatActivity implements SingleChatAdapter.OnChildInteraction
@override 
public void onMessageLongPressed(Datum2  message){
  // override delete button listener to call list.remove(message) 
  // notify adapter.
// open dialog

}