CSS 使用 :not ID with CLASS

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20328601/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:10:22  来源:igfitidea点击:

CSS use :not ID with CLASS

csscss-selectors

提问by Ulug'bek Ro'zimboyev

Does someone know how to use the CSS selector :not()as #some_id:not(.any_class_name)?

是否有人知道如何使用CSS选择器:not()作为#some_id:not(.any_class_name)

The code looks as if it is right, but it doesn't work. Is there another way without the notselector? I couldn't find anything on the Internet.

代码看起来好像是对的,但它不起作用。没有not选择器还有另一种方法吗?我在互联网上找不到任何东西。

I am making a web application, which includes more than one page, but several pages have divs with id=some_id. I thought I had to add specific CSS by adding any_class_nameone time using the above CSS code solve the problem, but it doesn't work.

我正在制作一个 Web 应用程序,其中包含多个页面,但有几个页面的 div 带有id=some_id. 我以为我必须通过添加any_class_name一次使用上述 CSS 代码来添加特定的 CSS 来解决问题,但它不起作用。

回答by Justus Romijn

I believe that you are reversingthe selectors. You have some elements with the same class, but you want to filter out an element with an specific ID. In that case:

我相信您正在反转选择器。您有一些具有相同 的元素class,但您想过滤掉具有特定ID. 在这种情况下:

HTML:

HTML:

<p class="someclass">hello</p> <!-- will be targeted by css below, thus green -->
<p class="someclass" id="some-id">hi</p> <!-- will not be targeted by css below -->

CSS:

CSS:

.someclass:not(#some-id){ color: green; } 
/* selects all elements with classname 'someclass', 
   but excludes the one that has also has an id of 'some-id' */

And as @secretSquirrel pointed out, note the browser compatibility: this selector is not supported by Internet Explorer 8 and older.

正如@secretSquirrel 指出的那样,请注意浏览器兼容性:Internet Explorer 8 及更早版本不支持此选择器。

回答by Fred

This will set all the backgrounds except the ones that has <a></a>:

这将设置所有背景,除了具有<a></a>以下内容的背景:

:not(a)
{
     background: gray;
}

回答by Sumit Raghav

I hope this will help you.

我希望这能帮到您。

Demo

演示

Another way is: You can override the css. May be you want something like this.

另一种方法是:您可以覆盖 css。也许你想要这样的东西。

<div id="demo">
<p class="class">This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>

Your css

你的CSS

#demo
{
color:#0000ff;
}
.class
{
color:#ff0000;
}