iT邦幫忙

0

兩個 css的外部樣式,互相覆蓋的問題?

QQ 2019-08-20 12:53:151705 瀏覽
  • 分享至 

  • twitterImage

我現在用了兩個css的套件

一個A套件:onsenUI
功能比較多類型的那種Framework
不是只有按鈕、表單、列表這些組件的那種框架

一個B套件:cirrus
只是一個純css的Framework
但是裡面有一個CARD的元件事我會需要用到的
因為A套件沒有我想要的那種CARD的元件

我的HTML結構長大概這樣

<ons-navigator id="myNavigator" page="tab1.html">
		<ons-page id="tab1">
			<!--one-xxx 開頭的是 onsen ui 自定義的html元件 -->
            
			<div class="row">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
				<figure class="fig">
					<img src="http://i.imgur.com/KjyvQ6I.jpg" alt="Yosemite National Park" class="img-stretch">
					<figcaption class="fig-caption text-center">Yosemite National Park</figcaption>
				</figure>
			</div>
			<!-- 上面這個div是cirrus的元件 -->

		</ons-page>
	</ons-navigator>

ons-page的樣式會把裡面那個row的樣式蓋掉
就是說onsenui把cirrus的樣式蓋掉

但是是只有在ons-page這個元件包覆的時候才會發生
我會需要ons-page提供給我的另外一個功能(不是外觀性質的的功能)

有辦法讓cirrus的css引入時強行優先覆蓋在onsenui的css上面嗎?
反正只是外觀強行蓋掉
我有試過把onenui的css先引入再引入cirrus的css但這樣好像沒用

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
舜~
iT邦高手 1 級 ‧ 2019-08-20 13:09:45

將您要的CARD元件功能獨立出來使用吧~~
把相關的css/js複製出來~~

0
gior__ann
iT邦新手 2 級 ‧ 2019-10-23 17:44:20

暴力方法~
透過chrome偵錯工具找到class名稱
再把整串丟進自己的CSS檔修改=>加上!important
不知道這樣有沒有辦法解決你的情況

el-classABC:not(:root) {
   color:red !important;
}

不過這樣不太好就是,因為變成曾經面試的某個主管給我的建議
引入這麼大的一個套件,卻只是需要他的2,3個功能,很浪費資源

而我近期再寫vue cli
component裡有些樣式改不了就必須將CSS搬到根組件(APP.vue)

我要發表回答

立即登入回答