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

2014-04-04 14:35:36 +08:00
 jason52
我想要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

但是没有实现成功。特来请教一下大家。
2813 次点击
所在节点    问与答
10 条回复
wenLiangcan
2014-04-04 14:43:47 +08:00
这个不知是不是想要的:
http://flukeout.github.io/

P233
2014-04-04 15:03:29 +08:00
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-04-04 16:11:15 +08:00
CSS 选择器上只要用 CSS3 的 :not() 就可以了
但是问题不在这里
你无法把 body * {display: none} 以后还要显示 .search-panel-fields
因为它的父元素也 display:none 了
jason52
2014-04-04 16:43:48 +08:00
@P233 这倒是个可以。可以通过aflred或者windows下altrun直接在弹出的对话框里搜索,我就想技术上的研究。



@NemoAlex 对,试验了一下不成功。所以这个exclude应该有个很高的优先级。貌似!important也不行?当然我知道正规开发时候也许没有这样的需求。
NemoAlex
2014-04-04 17:06:23 +08:00
看了一下淘宝
其实用 visibility 实现很简单:
body { visibility: hidden }
.search .search-bd { visibility: visible }
P233
2014-04-04 17:08:11 +08:00
@NemoAlex
@jason52 疏忽了,想着绕开 body,还是把父元素隐藏了
jason52
2014-04-04 17:43:57 +08:00
@P233 就是把除了某一元素之外的全部元素都隐藏了,不知道有没有这种shortcut
P233
2014-04-04 18:14:09 +08:00
@jason52 用 :not() , 比如有 10 个 anchors,只显示最后以一个,隐藏其他九个

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

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

尝试了 @NemoAlex 的办法,有效 :)
ytzong
2014-04-04 18:39:42 +08:00
直接在浏览器地址栏自定义一个搜索就好了吧,何必这么麻烦
jsonline
2014-04-04 19:19:09 +08:00
Chrome 自定义搜索

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/107259

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX