在CSS Selector之后

Question

after伪元素是否选择了应用after伪元素的每个子元素？例如：

.clear-fix {
    zoom: 1;   
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

<ul class="meals-showcase clearfix">
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/5.jpg" alt="Paleo beef steak with vegetables">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/6.jpg" alt="Healthy baguette with egg and vegetables">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/7.jpg" alt="Burger with cheddar and bacon">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/8.jpg" alt="Granola with cherries and strawberries">
                </figure>
            </li>
</ul> 

例如，上面的clearfix类附加到该ul元素。这是否意味着ul内部的每个li都将获得.clearfix类中描述的css属性，否则只会影响ul？

Answer 1

我认为你的意思是这个，而且它只适用于你调用的元素（你的例子.clearfix）

.clearfix {
  zoom: 1;
}

/* .clearfix and (,) .clearfix direct (<) child (<li> in example) */

.clearfix:after,
.clearfix > *:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

<ul class="meals-showcase clearfix">
  <li>
    <figure class="meal-photo">
      <img src="resources/img/5.jpg" alt="Paleo beef steak with vegetables">
    </figure>
  </li>
  <li>
    <figure class="meal-photo">
      <img src="resources/img/6.jpg" alt="Healthy baguette with egg and vegetables">
    </figure>
  </li>
  <li>
    <figure class="meal-photo">
      <img src="resources/img/7.jpg" alt="Burger with cheddar and bacon">
    </figure>
  </li>
  <li>
    <figure class="meal-photo">
      <img src="resources/img/8.jpg" alt="Granola with cherries and strawberries">
    </figure>
  </li>
</ul>

有关选择器的更多信息，请参阅：W3C selectors