Question

在div中不同元素的子元素之间添加边框的典型方法是什么？

在下面的示例中，p，div和div之间应该有边框，img。

<div id="list">
    <p>child 1</p>
    <div>child 2</div>
    <img src="">
</div>

如果所有孩子都是div，#list > div~div { border-top: 1px solid black }就足够了，但是由于元素不同，这似乎不切实际。我试图#list > ̃ { border-top: 1px solid black }没有成功。但是，#list > :not(:first-child) { border-top: 1px solid black }确实有效。虽然这是一个有效的解决方案，但我想知道是否有更好的方法？

Answer 1

这取决于您对最终布局的期望。首先，我假设您希望#list中的元素水平对齐。我在下面的代码中使用了一个flexbox。

您可以在元素右侧定义边框，但最后一个边框除外：

＆＃13;

try {

getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
        getSupportActionBar().setCustomView(R.layout.custom_toolbar);
        textView_actionBar = (TextView)findViewById(getResources().getIdentifier("action_bar_textView","id",getPackageName()));
        textView_actionBar.setText("Your_title");
    } catch (NullPointerException e) {
        e.printStackTrace();
    }

＆＃13;

#list {
  display: flex;
  align-items: center;
}

#list>*:not(:last-child) {
  border-right: thick solid blue;
}

＆＃13;

但是，如果您需要为特定元素使用边距，则边框可能不再垂直对齐。

＆＃13;

<div id="list">
  <p>child 1</p>
  <div>child 2</div>
  <img src="http://placehold.it/50">
</div>

＆＃13;

#list {
  display: flex;
  align-items: center;
}

#list>*:not(:last-child) {
  border-right: thick solid blue;
}

＆＃13;

Answer 2

#list :not(:last-child) {
  border-bottom: 1px solid red;
}

Answer 3

这应该是好的工作

#list * {
 border: 1px solid red;
}

https://jsfiddle.net/84djw33j/2/

Answer 4

尝试使用：first-of-type，：last-of-type和：only-of-type伪选择器这是一个有用的link

使用选择器的孩子之间的边界

4 个答案: