css：not（）选择器不起作用

我如何在这里使用：not（）选择符错误？我试图选择除footer元素之外的所有元素;我试着用指footer元素以其entry-footer类，但还是同样的结果：css：not（）选择器不起作用

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>

来源

2016-12-03 7asobate-

你的选择其实不选择footer元素，但它是选择span和a该元素的子元素，并将其中的文本变成红色。 :not选择器将仅排除单个元素。

尝试直接孩子选择>只选择.entry-wrapper直接孩子。你可以结合两个相似的选择器来获取其他元素的子元素。

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>

来源

2016-12-03 07:02:41

可能不需要第二选择颜色从父传播给所有儿童。 –

@SalmanA取决于。没有它，链接仍然是蓝色的。 –

试试这个可能：

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

来源

2016-12-03 07:02:18

通过使用child combinator：

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>

来源

2016-12-03 07:28:22

css：not（）选择器不起作用

回答

相关问题