css:not()选择器不起作用

时间:2016-12-03 06:59:06

标签: css

我如何在这里使用:not()选择器错误?我正在尝试选择除footer元素之外的所有元素;我尝试引用footer元素及其类entry-footer,但结果仍然相同:

article.post .entry-wrapper :not(footer) {
  color: red;
}
<article id="post-92" class="post-92 post type-post status-publish format-standard hentry category-uncategorized">
  <div id="post-92-thumbnail" class="thumbnail-wrapper" style="background-image:url(
    	http://netdna.webdesignerdepot.com/uploads/2016/07/featured-768x438.jpg
    )"></div>
  <div class="entry-wrapper">
    <header class="entry-header">
      <div class="category-link"><a href="http://localhost/wordpress/?cat=1" rel="category">Uncategorized</a>
      </div>
      <h2 class="entry-title"><a href="http://localhost/wordpress/?p=92" rel="bookmark">Article title</a></h2>	
      <div class="entry-meta">
      </div>
      <!-- .entry-meta -->
    </header>
    <!-- .entry-header -->
    <div class="entry-content">
      <p>Excerpt</p>
    </div>
    <!-- .entry-content -->
    <footer class="entry-footer">
      <span>December 2, 2016 by <a href="http://localhost/wordpress/?author=1">xp95</a></span>
    </footer>
    <!-- .entry-footer -->
  </div>
</article>

2 个答案:

答案 0 :(得分:1)

尝试这个:

article.post .entry-wrapper *:not(.entry-footer)

答案 1 :(得分:1)

使用child combinator

&#13;
&#13;
article.post .entry-wrapper > :not(footer) {
  color: red;
}
&#13;
<article id="post-92" class="post-92 post type-post status-publish format-standard hentry category-uncategorized">
  <div class="entry-wrapper">
    
  <div>** All the text **</div><br />
    
  <footer class="entry-footer">
      This is :not() working in footer!<br />
      <span>December 2, 2016 by <a href="http://localhost/wordpress/?author=1">xp95</a><br />
        :not() working within tags under footer.
      </span>
    </footer>
    <!-- .entry-footer -->
  </div>
</article>
&#13;
&#13;
&#13;