解決CSS樣式沖突的幾個辦法(小結)_CSS教程_CSS_網頁制作

來源:腳本之家  責任編輯:小易  

解決方法有很多,如果可以對html改動的話,就給你需要細化的頁面元素加多一個class或者ID就行了,當然這種方法應該不是你想要的。那么接下來是不改變HTML的情況下,直接用css的方法來實現你想要的效果—方法一 細化選擇符假如全局是這樣來定義一個元素的樣式的:.abc {background:#000},同時這個class為abc的元素是隸屬于某個元素的,比如下面這樣的html代碼結構div>那么在細化css里面,只需要在.abc前面加多一個父元素的選擇符就行了:container.abc {background:#fff}這樣.container.abc的優先級就大于了.abc,自然細化css里面的background設置也就不會被全局CSS覆蓋了~方法二 提升樣式的優先級這種方法個人不太推薦,相對而言會簡單粗暴一些。同樣是上面的例子,在細化CSS里面,只要在樣式后面加一個!important,例如這樣:abc {background:#fff!improtant;}這個樣式的優先級就會默認提升到頂級,全局樣式就無法影響到它了。方法三 改變兩個樣式的加載順序這種方法比較簡單,就是只要把細化css加載在全局css之后就行了,這樣后面的樣式就會自動覆蓋前面的樣式。不過如果你的html里面這兩個樣式表的加載順序是先細化后全局的話,就要稍微調整一下代碼才行www.anxorj.tw防采集請勿采集本網。

1. 細化選擇符

不要小看這條,也許折騰了你兩天都沒有解決的 CSS BUG 問題,卻僅僅源于這里。畢竟頁面的模板一般都是由開發來嵌套的,而他們很容易犯此類問題?旖萏崾荆嚎梢杂 Dreamweaver 打開文件檢查,一般沒有閉合

通過使用組合器(Combinator)將選擇器的描述寫得更加精確(參考CSS選擇器 - MDN  ),例如對于下述代碼片段,如果想給.cellphones中的.apple增加樣式,只使用.apple,勢必會對.fruit中的.apple也造成影響。

導航樣式中有偽類,由于樣式繼承性的原因,所以\"設為首頁\"繼承了偽類的屬性;你可以給\"設為首頁\"加個id清除影響它的那些樣式如: url(#default#homepage)’;this.setHomePage(’http://www.xxx.xxx

<div class="cellphones"> <div class="apple"></div></div><div class="fruit"> <div class="apple"></div></div>

問題應該是出在 mainTable.tBodies,但你未貼出后半段html代碼,以致于無法確定。secTable.cells[n].className=\"sec2;在此句后面添加一段: if(mainTable.tBodies){ alert(mainTable.tBodies.length);}

可以使用后代組合器(Descendant Combinator)或子代組合器(Child Combinator)這種更為精確的描述。描述得越精確,優先級越高,優先級更高的描述會覆蓋優先級較低的描述。

.head是class類再有 網頁文件里的head標簽 是顯示你在網頁選項卡里的信息 如果你想給他加樣式 那就是玩呢 不行的 在body里寫一個 測試 然后把 p{background:#003399;} 放到你的css文件里 你再試試

/* 后代組合器:所有后代節點 */.cellphones .apple { border: 1px solid black;}/* 更加精確的后代組合器 */body .cellphones .apple { border: 1px solid blue;}/* 子代組合器:直接子節點 */.cellphones > .apple { border: 1px solid red;}

如果給.apple按順序加上上述全部樣式,最終,邊框將呈現藍色。

詳細的優先級規則參見CSS 優先級

2. 再寫一次選擇器名

本質上是上一種情況的特例。例如對于.apple,添加如下樣式:

.cellphones > .apple.apple { border: 1px solid purple;}.cellphones > .apple { border: 1px solid red;}

最終,邊框將呈現紫色。

3. 改變CSS樣式表中的順序

對于相同類型選擇器指定的樣式,在CSS文件中的順序靠后的樣式會覆蓋之前的樣式。

例如對于下述代碼中的div元素,瀏覽器渲染的結果會是紅色的:

<div class="redBorder" class="blackBorder"></div>

.blackBorder { border: 1px solid black;}.redBorder { border: 1px solid red;}

需要注意的是,盡管在HTML文件中.blackBorder出現在.redBorder后,但優先級的判斷是根據他們在CSS文件中的順序。也就是說,CSS文件中更為靠后的.redBorder才會被采用。

4. 主動提升優先級(不建議)

還有一種簡單粗暴但是并不建議的辦法,就是在需要使用的樣式后加上關鍵字!important可以將樣式優先級提到極高。例如:

<div class="redBorder" class="greenBorder"></div>

.greenBorder { border: 1px solid green !important;}.redBorder { border: 1px solid red;}

對于上述代碼,邊框將顯示為綠色。

使用 !important 是一個非常不好的習慣,會破壞樣式表中固有的級聯規則,使得調試變得非常困難!

參考資料:

優先級 - MDN

css樣式沖突怎么解決 - 魔法時光機

到此這篇關于解決CSS樣式沖突的幾個辦法(小結)的文章就介紹到這了,更多相關CSS 樣式沖突內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持真格學網!

多個樣式表使用 一般針對對個模板來設置的比如用戶的前臺信息是一個 樣式表css1 然后后臺操作的界面是另一個 css2 這樣在以后的修改都非常的方便沖突是因為你對一個class 后者 id 設置的多個同樣的樣式 這樣才會沖突解決兼容 在實踐中發現以及baidu內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • css樣式沖突問題練習示例
  • 為什么一個頁面要用好幾個CSS樣式去控制,這樣不沖突嗎?或者說怎樣用多個CSS去控制
  • 怎么解決兩個CSS定義沖突?
  • 網頁中引用兩個css沖突怎么辦?
  • 求解決方法:在dreamweaver中打了幾個字設置了了一個css樣式屬性,怎么后面的文字一直都用的這個屬性呢,
  • css樣式設計時快速定位bug的幾個好方法
  • css樣式與“設為主頁”沖突
  • asp 重復調用含同一個JS的asp頁面,求沖突解決辦法
  • 這個css樣式怎么也關聯不起來,跪求解決方法
  • 在DW中,我每插入一個層它就自動帶有CSS樣式,并且那些樣式都是絕對定位的。我要怎樣才能不要它自動帶樣式
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss教程樣式沖突csscss樣式沖突問題練習示例css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css控制ul li 的樣式詳解(推薦)html設置超鏈接字體顏色和點擊后的字體顏色div水平垂直居中的完美解決方案css設置各種中文字體如雅黑、黑體、宋體、楷體等等css 文本字體顏色設置方法(css color)css 漂亮搜索框美化代碼css自定義select下拉選擇框的樣式(不用其他標簽模擬)css圓角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行縮進兩個文字css3里box-shadow屬性的使用方法示例詳解css垂直居中的另類實現代碼詳解(不走尋常路)css viewport 單位 實現快速布局css布局兩個button在同父標簽中左右兩側分布的方法css變量對js交互組件開發帶來的提升與變革示例代碼詳完美解決webpack打包css背景圖片路徑問題純css實現選中商品后右下角顯示√號功能css 實現動態二級菜單flex移動布局中單行和雙行布局的區別及使用詳解css實現導航固定的、左右滑動的滾動條制作方法
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载