不是 css 中的选择器不起作用? [英] not selector in css not working?

问题描述

以下是我试过的代码

HTML

<span>Span1</span><span>Span12</span><span>Span13</span>
<div><span>Span1</span><span>Span12</span><span>Span13</span>

<span>Span2</span><span>Span3</span>

CSS

 :not(div>span){颜色:#ff0000；}

我希望 span2 和 span3 的 span 使用 not selector

为红色

检查 Js 小提琴

http://jsfiddle.net/82KwV/

解决方案

:not 接受 简单选择器 作为参数.<代码>div >span 不是一个简单的选择器，所以它不能在那个上下文中使用.因此，您不能在 CSS 中说我希望所有不是带有 div 父级的跨度的所有内容都为红色"，而您必须妥协.

一种可能性是针对一般情况的特定子集.例如，细微不同的没有 div 父级的所有跨度"对应于:

:not(div) >跨度{颜色:红色}

在更复杂的情况下，这种方法可能不可行(例如，您不能使用 div, p 而不是上面的 div)，在这种情况下，您将不得不求助于其他选项，例如做/撤消"技巧:

span { 颜色:红色 }div >跨度{颜色:继承}

这种安排可以很容易地扩展为 p >跨度，div >span，但当然有一个权衡:这些规则可能会覆盖样式表中的其他内容.

Following is the code I have tried

HTML

<div>
     <span>Span1</span>
     <span>Span12</span>
     <span>Span13</span>
</div> 

<div>
     <span>Span1</span>
     <span>Span12</span>
     <span>Span13</span>
</div> 

<span>Span2</span> 
<span>Span3</span> 

CSS

 :not(div>span)
   {
      color : #ff0000;
   }

I want the spans with span2 and span3 to be red using not selector

Check the Js fiddle

http://jsfiddle.net/82KwV/

解决方案

:not accepts a simple selector as an argument. div > span is not a simple selector, so it cannot be used in that context. As a result, you can't say "I want everything that is not a span with a div parent to be red" in CSS and you have to compromise.

One possibility is to target specific subsets of the general case. For example the subtly different "all spans that do not have a div parent" corresponds to:

:not(div) > span { color: red }

In more complicated scenarios this approach might not be feasible (e.g. you cannot use div, p instead of div above), in which case you would have to turn to other options such as the "do/undo" trick:

span { color: red }
div > span { color: inherit }

This arrangement can easily be expanded to p > span, div > span, but of course there is a tradeoff: these rules might override something else in your stylesheets.

这篇关于不是 css 中的选择器不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！