css 怎么覆盖框架样式

html-css036

css 怎么覆盖框架样式,第1张

自己写个class样式覆盖到框架的样式位置就好了。

1.自定义图标替换ionic图标样式

<ion-item class="item item-complex my-complex item-icon-left item-icon-right">

<a class="item-content my-content" ng-click="goPage('archive', '个人信息')">

<i class="icon datum-img"></i>

<span style="font-size: 90%line-height:inherit">个人信息</span>

<i class="icon ion-ios-arrow-right msgText" style="font-size: 20px"></i>

</a>

</ion-item>1234567

.datum-img{/* 个人信息*/

background: url(../img/mine/datum.png) no-repeat center width: 20px height: 20px margin-top: 3px display: inline-block background-size: 100%}12345678

.my-complex .my-content{padding: 10px 0px 10px 0px}123

从代码中可以看到,.datum-img是使用自定义图标,宽高大小需要明确指出。而下面 .my-complex .my-content的样式内容是覆盖掉框架的.item-complex .item-content中padding的规格,而其他规格没写则还是以框架原有的规格显示。图标大小可以用font-size来调整。

总结:覆盖样式,1、先看下框架css的层次,2、依据框架层次自己写个不同名的class样式,样式内含有你需要覆盖的规格key要对,然后自己改想要的value。3、把自己写好的class样式名写到你需要覆盖的框架样式后面就能实现覆盖了。而且不会对原有的框架样式发生改变。

1、一种是dom结构复杂2、另外一种是加载了过多的css样式,3、前者好解决,后者的话如果用了mui.css就比较麻烦了3、现在是尽量少用mui.css,要用到一些mui的控件时,就把依赖的样式从css中拷贝出来4、建议官方把css拆成 base.css+各种控件.css,后来我发现还真不好拆,前期没设计好,后期越来越臃肿。