请教一下 css 如何 exclude 一个 class。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4300 天前的主题，其中的信息可能已经有所发展或是发生改变。

我想要redesign一下淘宝首页，因为我用tb从来都是直接在搜索框里面搜索，从来不在首页导航栏里面选来选去的，而且现在首页花花绿绿的图片动来动去好烦心的说，因此，我希望改造首页成为一个类似google这样简洁的页面。

=======================
以上为背景。

我希望通过stylish的形式自己编写css脚本来改造。通过把整个body display：none，只留下div.search-panel-fields就行了。问题是，css怎么exclude一个具体的class呢？

已查阅http://stackoverflow.com/questions/16201948/how-to-exclude-particular-class-name-in-css-selector

但是没有实现成功。特来请教一下大家。

首页

CSS

exclude

10 条回复 • 1970-01-01 08:00:00 +08:00

wenLiangcan

2014 年 4 月 4 日

这个不知是不是想要的：
http://flukeout.github.io/

P233

2014 年 4 月 4 日

body * { display: none }
.search-panel-fields { display: block }

话说自己写个 form 就好了

<form method="GET" action="http://s.taobao.com/search">
<input name="q" type="text">
<button>sumit</button>
</form>

NemoAlex

2014 年 4 月 4 日

CSS 选择器上只要用 CSS3 的 :not() 就可以了
但是问题不在这里
你无法把 body * {display: none} 以后还要显示 .search-panel-fields
因为它的父元素也 display:none 了

jason52

2014 年 4 月 4 日

@P233 这倒是个可以。可以通过aflred或者windows下altrun直接在弹出的对话框里搜索，我就想技术上的研究。

@NemoAlex 对，试验了一下不成功。所以这个exclude应该有个很高的优先级。貌似!important也不行？当然我知道正规开发时候也许没有这样的需求。

NemoAlex

2014 年 4 月 4 日

看了一下淘宝
其实用 visibility 实现很简单：
body { visibility: hidden }
.search .search-bd { visibility: visible }

P233

2014 年 4 月 4 日

@NemoAlex
@jason52 疏忽了，想着绕开 body，还是把父元素隐藏了

jason52

2014 年 4 月 4 日

@P233 就是把除了某一元素之外的全部元素都隐藏了，不知道有没有这种shortcut

P233

2014 年 4 月 4 日

@jason52 用 :not() , 比如有 10 个 anchors，只显示最后以一个，隐藏其他九个

a:not(:last-of-type) { display: none }

刚刚的情况是 body * {} 会 display:none 所有元素包括目标元素的父元素，一旦父元素被隐藏，子元素再怎么 important 也不会有效果。

尝试了 @NemoAlex 的办法，有效 :)

ytzong

2014 年 4 月 4 日

直接在浏览器地址栏自定义一个搜索就好了吧，何必这么麻烦

jsonline

2014 年 4 月 4 日 via Android

Chrome 自定义搜索