Liferay中CSS冲突的一般处理方法
经常碰到有人问在Liferay中的CSS冲突了,引入的第三方插件或者库样式不对,样式被liferay覆盖了等等问题,归结起来主要有两种情况:
- 第三库的样式被liferay中的样式给覆盖了;
- 第三库中某些地方不需要样式的被liferay添加了新的样式。
CSS的样式问题,相对是比较容易解决的问题,需要了解的是CSS的样式继承与优先级的基础知识。
CSS的样式优先级
首先来看一下典型的DOM结构图
我们写CSS样式的时候,一般有如下几种写法:
- 通配选择器(*)
- 类型(tag)选择器
- ID选择器
- 类(class)选择器
- 属性选择器,内联的style等
优先级是这样的:
important>内联的>ID选择器>类选择器>基于类型tag的>通配符的
比如下面一段html代码
<html> <body> <div> <ul class="demo-ul" id="demo-id-ul"> <li class="demo-li" id="demo-id-li"></li> </ul> </div> </body> </html>
这是一段最简单的代码,如果我们在css文件中写下面的样式
.demo-li{color:#000}
#demo-id-li{color:#fff}
li{color:#ddd}
在上面的这几个样式里面,最终生效的是颜色是#fff,这是因为ID的优先级最高,但是如果在li里面有style,那就是style里面的样式最终使用。
CSS样式的最长路径匹配
前面说的是不同的写法,有不同的优先级,那同样写法的时候,就是谁匹配的最精确,谁的优先级最高。
比如上面的代码,有以下几种写法:
ul .demo-li{color:#fff}
.demo-ul .demo-li{color:#000}
我们会发现,下面的会覆盖上面的。
如果我们写成#demo-id-ul .demo-li{color:#ddd},又会覆盖上面的。
如果是同样的级别的,后面的会覆盖前面的。
如果在样式中添加了important会覆盖所有的。
Liferay中的样式冲突解决
这上面是基本的规则,回到Liferay中,Lifeay系统中默认自带了大量的样式,包括大量的全局样式,所以引入的第三方的库,或多或少会有一些样式冲突。
Liferay中使用基础样式库是Bootstrap 2的版本,然后添加了很多自己的样式,样式都是使用了.aui来做前缀,比如input、ul、li等基础的样式Liferay都添加了基础的样式。如下图:
Liferay针对这些基础标签添加了样式,有些我们添加的第三方库,如easyui、jquery UI、ztree等,就会存在可能Liferay添加的padding、margin等基础样式导致显示异常。所以如果我们想对我们自己的portlet内样式进行重写,前面一般加上.aui就行了。
比如我们有一个input的class为"custom-input",如果我们写.custom-input{},则可能发现不生效,这个时候我们有几种处理策略:
- 使用.aui .custom-input{};如果还不行,就添加.aui .portletclass(或者是此元素的上级class) .custom-input{}。
- 添加上ID(不推荐);
- 如果还不行,就添加important,一般不使用。
Liferay中的样式写在什么地方
要覆盖的样式可以写在很多个地方,主题中,页面的css中,直接在页面中添加style标签等。
1、主题中
最推荐的将样式写在主题中,在主题的css中可以全局的定制,而且可以达到更换主题也将样式更换的效果。
2、写在portlet的JSP中引用的css文件中
每一个portlet里面对应的JSP,可都可以引用CSS文件,也可以将样式写在这里面。
3、在JSP中直接添加style标签
也可以在JSP中添加<style>标签,将样式直接写在里面。
4、写在配置中
有些如果不允许修改代码,或者是如果临时的fix一下错误,可以将样式代写到Liferay页面管理的css里面,或者是Portlet配置的css样式里面。