【Stylish样式】增强“百度”、“有道”和“Google”的样式

我在 DavidONE 的 Google Compact 基础上写成的三个样式表，重点在于“自动”高亮搜索关键字，另外还用横线把每个搜索结果划分开来，去掉了链接下划线，去掉了搜索网站的Logo（我觉得这个太占空间了），以及改变了一些链接和文字的配色和大小以突出经常用到的和淡化一般不用的。增加搜索栏淡蓝色背景。

请到以下链接下载样式表（需要先安装 Stylish）以及查看效果图和详细更新情况。

Google：http://userstyles.org/styles/16887
*此样式应用于主流语言的Google站点，对主要搜索页面有效。

百度：http://userstyles.org/styles/16890
*此样式应用于百度的网页、新闻、图片、视频、音乐和知道的搜索页面甚至其他使用相同格式的搜索页面。

有道：http://userstyles.org/styles/16891
*此样式应用于有道热闻、网页、音乐、图片、视频、博客搜索。（不再包含有道海量词典的样式）

有道海量词典：http://userstyles.org/styles/17878
*本样式适用于有道海量词典并添加高亮关键字效果。

最后更新：2010.01.18
详细更新列表请到样式的页面中查看。

存在的不足有：
搜索结果中并没有被搜索引擎突出的关键词（例如用有道搜 “user script” 得到的 “userscript” 并不会粗体显示）也不会被这些样式所高亮。

欢迎大家使用和提出建议，谢谢！

首先一个疑问，这个是修改网页内容的，应该成为一个GM脚本而多过一个stylish脚本吧？我放到userContent里面也是OK的。

去掉Logo倒没什么必要，我建议你在源代码中加一个注释允许别人修改回去。初衷是为了节省空间，但是条目之间的间距这么大，事实上加大了很多滚动量，我觉得Google默认的间距已经可以了。

去掉下划线是一个相当好的主意。

强制字体为Verdana？没有必要吧。

另外，为什么有一个这么露骨的词汇啊？

/*
P[class="std"]:before { 
content: "F*CK!!" !important; 
color: red !important
}
*/

还有一个小疑问，关于.com, .co.uk, .cn, .fr.......这么多种域名没有什么简单的方法通配掉么？

没修改什么内容吧。。只是改了样式而已。好像没什么必要做成userscript。

我安了个google的看了一下，配色倒是蛮清新的，但是整体都变淡了，即使是单看搜索结果的链接也比较吃力。另外搜索结果的网址也被淡化了，网址应该是经常要看的吧？

kmc：首先一个疑问，这个是修改网页内容的，应该成为一个GM脚本而多过一个stylish脚本吧？我放到userContent里面也是OK的。回到原帖

既然是样式表能做的事，就让样式表做好了，预览和修改都方便。


“domain”是不能用匹配符的，这个我也想知道有什么办法。

[quote="ferret"]我安了个google的看了一下，配色倒是蛮清新的，但是整体都变淡了，即使是单看搜索结果的链接也比较吃力。另外搜索结果的网址也被淡化了，网址应该是经常要看的吧？[/quote]
网址的颜色是源于原始配色的色度跟链接相似而且都是高对比度色，比较伤眼，所以稍微调整。我自己看觉得不吃力，如果不适合你的话请修改这行：

cite {
color: #4A9871 !important;
}

还有，kmc，那个Google的样式高亮效果全出来了吗？
另，Google的全注释我会之后加上。
由于我自己一直都是 GDI++ 渲染底下用默认 120% 字体大小浏览的，所以可能会出现在其他设置下效果不如意的地方，请大家尽可能提出，帮忙完善这些样式，谢谢了。
PS.我自己常用的搜索引擎是有道，第二是Google。

Google 样式已更新。

三个样式都更新了，百度的样式修正了一个会误杀百度地图部分内容的代码，使用者一定要马上更新；其他两个推荐更新。

想请教下楼主下面代码中的":after"是指代什么呢，貌似css没有after这个伪类啊。

/* ===增加“相关搜索”项间间隔=== */
a.rsl:after{
content: "　" !important;
}

harnack：想请教下楼主下面代码中的":after"是指代什么呢，貌似css没有after这个伪类啊。

/* ===增加“相关搜索”项间间隔=== */
a.rsl:after{
content: "　" !important; 
}

回到原帖

具体我也不清楚，没详细参考过文档。我是通过参考其他人做的 css 样式里面有用到 “:before” “:after” 的用法，然后借过来发现也可以用，于是就这样写了。反正是向目标元素的之前／之后插入指定html内容的语法。

－－－
找到一个介绍这些伪类的：http://www.w3schools.com/CSS/CSS_pseudo_elements.asp
里面有提到 “:before” “:after” 在IE上没效果。

－－－
另外 Google 样式更新了其自定义搜索的网址，以及字体大小设置。

多谢楼主指点，又学了一招。我搜到了其对应的汉语版本：
hhttp://www.w3school.com.cn/css/pr_pseudo_after.asp
另外还有content的用法：
http://www.w3school.com.cn/css/pr_gen_content.asp

三个样式都更新了，扩展了高亮关键字支持的范围。

有道海量词典的样式对我来说近乎完美了，其代码包含在“有道”的样式中。
有道海量词典挺不错的。

nice job

百度，你赢了！
因为我倾向于隐藏搜索引擎的Logo（一来让网页多了几十像素的高度；二来把搜索框往右推了数百像素，这是最不可忍的），但也觉得别人也许不会看标签上的网站图标、搜索按钮上的字、蓝条上文字的差异以及网页地址来辨别搜索网站（当然这是指在搜索引擎间跳来跳去的情况下，专心用一个的话这不成困扰），所以就萌生了在页面上加个搜索引擎名的想法。
后来就演变成改变搜索引擎的功能导航栏的样式了，做成的效果是当前导航功能会高亮和大字体显示，并且前置搜索引擎名；鼠标移到其他导航链接上相应的导航链接会变大字体。
有道和Google的都很轻松地做好了，唯独是百度，不同的导航功能下导航栏的容器居然都不一样，有div.Tit, div.tit, div[id="tab"]等等，当前功能（视觉上只是粗体而已）的样式也有多种方式实现：b、strong、font[class=XXXX]等等等等……
无话可说了，百度，你赢了！

［上面提到的样式都已经完成，但由于不确定是否对其他人有用（有多少人也觉得隐藏Logo不错？），暂不放出。］

更新样式，全部默认隐藏 Logo ，通过在当前搜索功能上加搜索引擎名字的方式识别；搜索条加上淡蓝色底色；对有道和 Google 添加搜索结果条目 URL 上的关键字高亮。
另外将有道搜索中关于有道海量词典的部分提取并加强成一个新样式。

用完以后，下面的关键字比较难看，变得很小