Question

我想调整单选按钮的边距，除了第一个没有15px左边的单选按钮（它应该是0）之外，它们都应该是相同的。我尝试使用：first-of-type关键字来解决这个问题，但之后它将为所有输入类型定义规则。如何通过严格区分CSS和HTML并以美丽的方式来解决这个问题？

HTML：

<div class="payment-methods">
    <div class="method"><input name="1" type="radio"><label class="radio"><img src="https://lol-accs.com/images/ico_visa.jpg" alt=""></label></div>
    <div class="method"><input name="1" type="radio"><label class="radio"><img src="https://lol-accs.com/images/ico_visa.jpg" alt=""></label></div>
    <div class="method"><input checked="" name="1" type="radio"><label class="radio"><img src="https://lol-accs.com/images/ico_visa.jpg" alt=""></label></div>
    <div class="method"><input name="1" type="radio"><label class="radio"><img src="https://lol-accs.com/images/ico_visa.jpg" alt=""></label></div>
    <div class="method"><input name="1" type="radio"><label class="radio"><img src="https://lol-accs.com/images/ico_visa.jpg" alt=""></label></div>
</div>

CSS：

.method, img, input {
  display: inline-block;
  vertical-align: middle;
}
.payment-methods input[type=radio]:first-of-type {
  margin-left: 0px;
}

.payment-methods input[type=radio] {
  margin: 0px 5px 0px 15px;
}

JSFiddle：http://jsfiddle.net/0apLmge9/4/

Answer 1

在这种情况下，您应该定位第一个<div class="method">，因为第一个类型在其中包含元素，因此您的input:first-of-type将影响所有单选按钮。

.payment-methods .method:first-of-type input[type=radio] {
  margin-left: 0px;
}

http://jsfiddle.net/0apLmge9/6/

Answer 2

定位第一种付款方式。

.payment-methods .method:first-child input[type=radio] {
  margin-left: 0px;
}

为输入类型的第一个元素定义CSS规则

2 个答案: