Question

我想仅设置第一个.mask div的样式，但我找不到如何做到这一点（除了给出另一个类和样式）。有没有办法使用伪元素，例如：first-child或：first-of-type？

我有这个HTML：

    <section class="cont-content work" id="work">
        <h1>work</h1>
        <article class="view">
            <img src="images/g.jpg" alt="">
                <div class="mask">
                    <h2>Title</h2>
                        <p>subtitle</p>
                    <a href="#" class="info">Read More</a>
                </div>
        </article>

        <article class="view">
            <img src="images/m.jpg" alt="">
                <div class="mask">
                    <h2>title</h2>
                        <p>subtitle</p>
                    <a href="#" class="info">Read More</a>
                </div>
        </article>

        <article class="view">
            <img src="images/p.jpg" alt="">
                <div class="mask">
                    <h2>title</h2>
                        <p>subtitle</p>
                    <a href="#" class="info">Read More</a>
                </div>
        </article>          
    </section>

谢谢！

Answer 1

是

child.on("exit", function (code, signal) {
  if (code === null && signal === "SIGTERM") {
    console.log("child has been terminated");
  }
});

是你正在寻找的

Answer 2

CSS3 :nth-of-type() Selector

＆＃13;

.view:nth-child(2) .mask {
  background: lightblue;
}

＆＃13;

<section class="cont-content work" id="work">
  <h1>work</h1>

  <article class="view">
    <img src="images/g.jpg" alt="">
    <div class="mask">
      <h2>Title</h2>

      <p>subtitle</p> <a href="#" class="info">Read More</a>

    </div>
  </article>
  <article class="view">
    <img src="images/m.jpg" alt="">
    <div class="mask">
      <h2>title</h2>

      <p>subtitle</p> <a href="#" class="info">Read More</a>

    </div>
  </article>
  <article class="view">
    <img src="images/p.jpg" alt="">
    <div class="mask">
      <h2>title</h2>

      <p>subtitle</p> <a href="#" class="info">Read More</a>

    </div>
  </article>
</section>

＆＃13;

Answer 3

使用nth-child()

.view:nth-child(2) .mask {
 font-family: Arial;
}

http://codepen.io/anon/pen/RPvgjP

Answer 4

根据您的结构，我会选择特定article内的第一个section（有ID）并从那里开始：

#work article:first-of-type .mask {
    /* your styles here */
 }

哦，顺便说一下，first-child / first-of-type等是伪类而不是伪元素。

在部分内的多篇文章中使用伪元素first-child

4 个答案: