CSS第一个孩子不工作

Question

我试图在居中的div中有3个元素空间相隔76个像素（第一个元素除外）。但是，第一个孩子的伪类似乎并不想强制执行。它一直被原规则所覆盖。

JSFIDDLE

CSS

.buddy-icons {
    margin: 0 auto;
  }
  .buddy-oval-icon {
    padding-left: 76px;
    height: 60px;
    width: 60px;
  }
  .buddy-icons > [class^="buddy-oval-icon"]:first-child {
    padding-left: none;
  }

Answer 1

none是padding-left的无效值。请改用0

.buddy-icons {
  margin: 0 auto;
}
.buddy-oval-icon {
  padding-left: 76px;
  height: 60px;
  width: 60px;
}
.buddy-icons > [class^="buddy-oval-icon"]:first-child {
  padding-left: 0;
}

<div class="buddy-icons">
  <img src="http://images.all-free-download.com/images/graphiclarge/button_blank_red_100846.jpg" class="buddy-oval-icon">
  <img src="http://images.all-free-download.com/images/graphiclarge/button_blank_red_100846.jpg" class="buddy-oval-icon">
  <img src="http://images.all-free-download.com/images/graphiclarge/button_blank_red_100846.jpg" class="buddy-oval-icon">
</div>

Answer 2

这对你有用：

.buddy-icons {
    margin: 0 auto;
  }
 .buddy-oval-icon {
    padding-left: 76px;
    height: 60px;
    width: 60px;
  }
  .buddy-oval-icon:first-child {
    padding-left: 0px;
  }

<强> Demo

Answer 3

将padding-left: 0;用于.buddy-icons > [class^="buddy-oval-icon"]:first-child

.buddy-icons {
    margin: 0 auto;
}
.buddy-oval-icon {
    padding-left: 76px;
    height: 60px;
    width: 60px;
}
.buddy-icons >[class^="buddy-oval-icon"]:first-child {
    padding-left: 0;
}

<div class="buddy-icons">
    <img src="http://images.all-free-download.com/images/graphiclarge/button_blank_red_100846.jpg" class="buddy-oval-icon">
    <img src="http://images.all-free-download.com/images/graphiclarge/button_blank_red_100846.jpg" class="buddy-oval-icon">
    <img src="http://images.all-free-download.com/images/graphiclarge/button_blank_red_100846.jpg" class="buddy-oval-icon">
</div>

Answer 4

尝试在代码中编辑以下内容，为您的小提琴工作。

.buddy-icons > [class^="buddy-oval-icon"]:first-child {
  padding-left: 0;
}

Answer 5

您可以通过在两侧添加边距来添加两个对象之间的间距。 CSS代码如下，

.element_name{
    margin-left:10px;
}

在左侧添加空间，或者您可以使用以下代码在右侧添加空间

.element_name{
    margin-right:10px;
}

Answer 6

试试这个：

.buddy-icons {
        margin: 0 auto;
      }
      .buddy-oval-icon {
        padding-left: 76px;
        height: 60px;
        width: 60px;
      }
      .buddy-oval-icon:nth-of-type(1) {
        padding-left: 0px;
      }