将CSS应用于div中仅第一个未知元素

Question

我想将margin top:15px应用于此div的第一个元素

我正在从数据库中提取ckeditor数据，因此第一个元素是不可预测的

这是我的div结构，

<div class="ckeditordata">

//1st element is unknown
//can be <p>, <ul>, <ol>
</div>

- dEL

Answer 1

你可以使用 :first-child。

.ckeditordata > :first-child {
  margin-top: 15px;
}

快速演示：https://jsfiddle.net/crswll/1re2p8sp/2/

- Bill Criswell

---

我认为.ckeditordata > :first-child会更好。因为它可以是<ul>等。 - c-smile

那是个很棒的答案。 - dEL

Answer 2

你可以使用css > 子选择器和 :nth-child(1) 来仅应用于第一个子元素的css，如下所示：

.ckeditordata > *:nth-child(1) {
  color: red;
  margin-top: 15px;
}

<div class="ckeditordata">
  <p>TEXT</p>
  <p>TEXT</p>
  <p>TEXT</p>
</div>

- Anonymous

Answer 3

尝试；

.ckeditordata :first-child {
    margin top:15px
}

- Alfred

Answer 4

.selector> *:nth-child(1) {
  color: green;
  margin-top: 20px;
  font-weight: 600;
}

<div class="selector">
  <p>TEXT</p>
  <p>TEXT</p>
  <p>TEXT</p>
</div>

- Sancode

Answer 5

你也可以通过jQuery来使用。检查一下这段代码，看看它是否有效：

$('.ckeditordata').children(':nth-child(1)').css('margin-top','15px');

- prajakta

---

这可以通过纯CSS完成。OP甚至没有标记jQuery，那么给出jQuery选项有什么意义呢？如果使用CSS无法实现，我可以理解。 - Harry