css：not（）セレクタが動作しない

Question

ここではnot（）セレクタを間違って使用していますか？私はfooter要素を除くすべての要素を選択しようとしています。私は、そのクラスentry-footerと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(
 
    \t 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> \t 
 
     <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>

Answer 1

あなたのセレクタを実際にがではありませんfooter要素を選択しますが、はで、spanとaその要素の子要素で、その内部のテキストを赤色にします。 :notセレクタは、単一の要素のみを除外します。

.entry-wrapperの直接の子のみを選択するように直接子セレクタ>を試してください。 2つの同様のセレクタを組み合わせて、他の要素の子も取得できます。 child combinatorを使用することにより

article.post .entry-wrapper > :not(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> \t \t <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>

Answer 2

は多分これを試してみてください：

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

Answer 3

：

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 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>