css 怎么覆盖框架样式

html-css021

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.行内样式＞指定样式＞通用class样式>通用未指定CLASS样式

2.例子：

1）<div style="...">aaaaaa</a>这就是指定用style的行内样式；

2）<div id="side" >aaaaaa</div>这就是指定id使用side样式；

3）<div class="ot">aaaaaa</div>这就是指了通用的class为ot的样式；

4）如<body><table><tr><th>这些一开始样式文件就定义好全程的样式，为通用为指定的样式；

最高就是指行内样式，接着就是指定ID的，然后就是CLASS，最后就是未指定通用样式；

选择器优先级问题：

#article #subject dl的优先级比#subject dl优先级高，所以无法覆盖；

#subject dl的优先级没有#article dl高，所以会覆盖；

为同一个元素设置多个样式时，此时哪个样式生效由选择器的优先级确定：

选择器的优先级（权重）：

内联样式    1000

id选择器    100

类和伪类选择器    10

元素选择器    1

统配选择器    0

继承的样式    无

当一个选择器中含有多个选择器时，需要将所有的选择器的优先级进行相加，然后再进行比较，优先级高的优先显示，选择器的计算不会超过其最大的数量级（10个id选择器的优先级

不能达到1000）

分组选择器（并集选择器）的优先级单独计算，不会相加。

样式后面加！important，该样式获取最高优先级，内联样式不能加！important属性。

样式相同的谁在下面执行谁（样式的覆盖）。