Riprov2主题美化包|HUAN子主题:搜索页面标签tag细节美化教程

今天发现RiproV2主题搜索点开后搜索框的标签看起来不是很美观。标签与标签内的文字缺少填充,而且上下两行标签也靠的太近。

动手美化一下,调整合适一点点。

RiproV2主题美化:搜索页面标签tag美化-1

F12查看CSS样式后,发现有个element.style的内联样式,默认优先级比较高,给标签新增样式后不起作用。

/*搜索栏标签美化*/
.search-keywords a{
	padding: 0px 5px;
	margin: 0px 0px 4px 0px;
}

去学习了一下如何修改element.style内联样式,原来在我们在写前面 web页面样式的时候,会发现有些时候,我们怎么修改 style里面的值,页面上的样式都不会修改,当你用工具查看时,会发现里面会有 element.style的值,这个值还找不到是在哪里出现的,还修改不了。

其实element.style是一种内联样式,很多情况下是在一些JavaScript代码里写死的,这种方法相当不好。但是有些时候,我们在使用第三方js文件时,会遇到。

哪么我们如何去修改它呢?可以在源代码中用!important 语法优先权来实现我们想要的效果。

/*搜索栏标签美化*/ 
.search-keywords a{
padding: 0px 5px!important;
margin: 0px 0px 4px 0px!important;
}

修改后,就可以提升优先权了,美化后的效果,看着舒服多了。

RiproV2主题美化:搜索页面标签tag美化-1