用class指定了CSS Style，但是沒效？

金載沅  史嘉蕾

---

我遇到的情況是這樣的

原本的網頁上, 就有指定了一系列的外觀

現在, 加了外掛套件bbcode

bbcode也有自己的css外觀  ↓

※預期的模樣

 

套在textarea上時

它變成有一半用原本的css, 有一半用bbcode的css.......  ↓

※得到的模樣><"

 

檢視它的HTML原始碼, 循著找到衝突的css

※CSS使用狀況, .markItUpEditor 都被刪掉了

 

※HTML層次, 紅色框, 是css style拿來命名的部分

 

預設外觀的 css：

#ct-cne td.col textarea { ... }

是按著html的框架的層次, 找到textarea來設的,

它的好處是, 隻要其它的版型, 也是一樣的框架, 就會套用這一個css style

 

bbcode 用的 css： 

奇蹟

.markItUpEditor{ ... }

版型上, 用 <textarea class="markItUpEditor" ...>  指定

 

當這兩種設定, 都在同個元素作用時

#ct-cne td.col textarea { ... } 優先於 .markItUpEditor { ... }

所以, 即使設了 class="markItUpEditor" 也沒用

 

解決這種問題, 有幾種作法

1. 把#ct-cne td.col textarea{ ... } 拿掉, 或是改寫設定

2. 把#ct-cne td.col textarea{ ... }, 更名為 .FormTextarea{ ... }, 然後把整個網站, 有用到這個設定的textarea翻一遍, 全都加上class="FormTextarea"   ← 超麻煩的=_=

3. HTML, 把td 的 class="col" 拿掉, 或是把 id="ct-cne"拿掉 ← 讓它不符合 #ct-cne td.col textarea{ ... } 這個名字

4. 在這頁的html裡, 用#ct-cne td.col textarea名字下css style, 內容用 .markItUpEditor{} 的設定 ← 用相同名字, 新設定蓋掉舊設定, 隻在這一網頁裡有效

 

很不巧的, 這一頁裡面, 還有另一個 textarea 欄位, 而且不套bbSeriesVol11code功能, 就是要用舊的css style

所以, 不能用上面的方法改...那...怎麼辦@@?

 

後來找到了個方法, 算是對我最合適的

我再寫一個css style :

#ct-cne td.col textarea.markItUpEditor { ... }

內容就用 .markItUpEditor{ ... } 的設定(一模一樣的, 整份複製過來)

醬就乖乖的, 顯示成bbcode的外觀了

 

這方法的缺點就是, 在修改時, 很容易漏掉它

但是, 偶爾冒出的一兩頁不合群的設定, 用這法方就很好解決

--