Question

我希望获得.wrapper之后的第一个元素，并将该元素设置为padding:20px。例如，在这种情况下，我希望<h1>的填充为20px。

<div class="wrapper">
    <h1>Text</h1>
</div>

但在这种情况下，我希望div类description的填充量为20px。

<div class="wrapper">
    <div class="description">Text</div>
</div>

我该怎么做？我试过了:first-child，但它没有用。感谢。

Answer 1

使用:first-child选择器的纯CSS。

.wrapper > :first-child {
  padding: 20px;
}

.wrapper > :first-child {
  padding: 20px;
}

<div class="wrapper">
  <div class="description">Text</div>
</div>

<小时/> 或者在jQuery中使用children()和first()方法。

$('.wrapper').children().first().css('padding','20px')

$('.wrapper').children().first().css('padding','20px')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="description">Text</div>
</div>

或使用:first-child伪类选择器。

$('.wrapper > *:first-child').css('padding','20px')

$('.wrapper > :first-child').css('padding', '20px')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="description">Text</div>
</div>

Answer 2

使用纯CSS：

＆＃13;

.wrapper :first-child {
  padding: 20px;
}

＆＃13;

<div class="wrapper">
    <h1>Text</h1>
    <h1>Text</h1>
</div>
<div class="wrapper">
    <div class="description">Text</div>
</div>

＆＃13;

Answer 3

＆＃13;

<div class="wrapper">
    <h1>Text</h1>
    <h2>Other Text</h1>
</div>
<div class="wrapper">
    <div class="description">Text</div>
    <div class="description">Other Text</div>
</div>

＆＃13;

如果您确定永远不会在子元素中嵌套任何元素，则可以省略enum Ingredients { struct Flower { } struct Sugar { } struct Yeast { } struct Eggs { } struct Milc { } } protocol ChocolateCakeIngredient { } extension Sugar: ChocolateCakeIngredient { } extension Eggs: ChocolateCakeIngredient { } ... func bake(ingredients: [ChocolateCakeIngredient]) { }。

获得div的第一个CSS子节点

3 个答案: