Question

我在父div中有几个页面具有不同的结构

<div class="post-formatting">
     <p>some text
           <em>
                <a href="http://example.com">Click here</a>
           </em>
     </p>
 </div>

<div class="post-formatting">
     <p>some text
           <a href="http://example-2.com">Click here</a>
     </p>
     <div>
           <a href="http://example-3.com">Click here</a>
     </div>
 </div>

<div class="post-formatting">
      <a href="http://example-4.com">Click here</a>
</div>

我需要为<a>内的所有<div class="post-formatting">标记设置一个通用的CSS规则，无论它是否是第一个孩子，都无关紧要。有没有办法做到这一点？ Thnx

Answer 1

是。这是非常基本的CSS。您可以通过以下方式完成此任务：

.post-formatting a {
    /* Your style declarations here. */
}

＆＃13;

.post-formatting a {
  color: red;
  font-weight: bold;
}

＆＃13;

<div class="post-formatting">
  <p>
    some text
    <em>
      <a href="http://example.com">Click here</a>
    </em>
  </p>
</div>
<div class="post-formatting">
  <p>some text
    <a href="http://example-2.com">Click here</a>
  </p>
  <div>
    <a href="http://example-3.com">Click here</a>
  </div>
</div>
<div class="post-formatting">
  <a href="http://example-4.com">Click here</a>
</div>

＆＃13;

Answer 2

/* all a tags within .post-formatting */
.post-formatting a {
   /* css rules */
}

/* only the first a tag within .post-formatting */
.post-formatting a:first-child {
   /* css rules */
}

/* all but the first a tags in .post-formatting */
.post-formatting a:not(:first-child){
   /* css rules */
}

Answer 3

您可以这样做：

.post-formatting a {
/* your css */

}

Answer 4

.post-formatting > *:first-child a, .post-formatting > a:first-child {  }

子元素的Css

4 个答案: