匯入的CSS樣式檔案與自定義CSS樣式檔案衝突

2021-10-16 11:57:51 字數 1077 閱讀 3592

在使用bootstrap時,有時候並不希望在整個**上使用 bootstrap,您只需要使用bootstrap css的一部分。

如果只是將 bootstrap css 直接新增到 head 中,就有可能會與其他的 css 產生衝突,從而產生混亂的樣式。

選擇重寫css樣式讓其覆蓋原有的樣式,如依然沒有得到解決,試試以下幾個方法:

1. 細化選擇符

假如全域性是這樣來定義乙個元素的樣式的:.abc ,同時某個元素的子元素也應用了乙個.abc的樣式,比如下面這樣的html**結構

class

="container"

>

class

="abc"

>

div>

div>

那麼在細化css裡面,只需要在.abc前面加多乙個父元素的選擇符就行了:

.container .abc

這樣.container .abc的優先順序就大於了.abc,這個css裡面的background設定也就不會被全域性css覆蓋了

2. 參照css 選擇器 //不太推薦

在css中,會根據選擇器的特殊性來決定所定義的樣式規則的次序,具有更特殊選擇器的規則優先於一般選擇器的規則。如果兩個規則的特殊性相同,那麼後定義的規則優先。

使用 less 為所有 bootstrap css 新增乙個類名稱:

處理步驟:

將匯入 head 標籤中的 bootstrap css 檔案

rel=

"stylesheet"

href

=""/>

替換為

rel=

"stylesheet"

href

=""/>

然後將html包裝在帶有類bootstrap-iso的div中,如下所示:

class

="bootstrap-iso"

>

div>

vue專案引入自定義 css的樣式檔案

es6的引入方式 vue檔案中 css檔案引入 js檔案的引入 在main.js中 import api from assets api api.config.js vue.prototype.api api p.s.傳統上,引入css樣式的三種方法 1.使用link來呼叫外部的css檔案 在hea...

liferay中css的自定義匯入

1 對於特別通用的檔案,比如是ext js庫要使用到的css檔案,你可以有2個選擇 選擇1 放在root html common themes top head.jsp中 portal css link href htmlutil.escape portalutil.getstaticresourc...

Flex樣式表自定義 css

第一 先在配置檔案中加入引用的樣式表 第二 在defaults.css中寫自己要增加的樣式 infosymbolstyle1 第三 在專案功能處引用 紅色標註部分即為引用 繪製柱狀圖 private function drawingzhuzhuangtu cityarr array,dataarr ...