有關列分組，定義css樣式無效的問題

有時候我們要單獨對**的某列定義單獨的樣式，就會很自然的想到 **的 在標籤內使用的 與標籤，對列進行分組。

來看個例子：

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>有關列分組，定義css樣式無效的問題
title
>
<
style 
type
="text/css"
>
table 
th,td 
style
>
head
>
<
body
>
<
table
>
<
colgroup 
class
="colgroup-1"
><
col 
span
="2"
/>
colgroup
>
<
colgroup 
class
="colgroup-2"
><
col 
span
=""/>
colgroup
>
<
tbody
>
<
tr>
<
th>表頭
th>
<
th>表頭
th>
<
th>表頭
th>
tr>
<
tr>
<
td>單元格
td>
<
td>單元格
td>
<
td>單元格
td>
tr>
<
tr>
<
td>單元格
td>
<
td>單元格
td>
<
td>單元格
td>
tr>
tbody
>
table
>
body
>
html
>

表頭是預設居中對齊的。單元格是預設左對齊的！

下面，我們對列組進天劍如下演示樣式：

css： 

.colgroup-1

看一下有沒有效果：

很明顯，並沒有向我們想象的一樣右對齊（谷歌，火狐，ie均無效）；

我們在來看一下看寬度有沒有效，避免測試受影響，我們先把，**中的 總寬度去掉（只是在測試寬度時去掉，下面測試背景顏色時會恢復），及修改

table

現在我們來給列組1 新增寬度

css修該位置的**：

.colgroup-1

乍看上去，好像是起作用了，但是經過我的測量發現，發現，列組1的寬度並不是150px，而是300px;看來在火狐瀏覽器中把列組的每個列的寬度解析成：150px（自我認為而已，猜的）；

此時看來寬度也是沒有效果。高度也是一點效果沒有（已測試），就附了；

我們再來看一下，背景顏色。

.colgroup-1

這次在各大瀏覽器中的效果都是一樣的；都得到了正確的渲染；

通過以上示例可總結為： 在列組上定義樣式，text-align 、width、hieght 、等都是無效的，只有背景顏色是有效的；

經過在網上的搜尋，發現原因是：

之所以直接在 col 上定義樣式無效，是乙個老問題了。實際上html4定義的col上的align屬性在現代瀏覽器上從來沒有得到過良好支援（只有始於css時代之前的ie支援），原因很簡單，因為此設計在css1、2乃至3的機制中都無法實現。

按照css的模型，乙個元素上的css樣式值要麼來自於匹配了自己的規則，要麼來自於匹配了祖先元素的規則然後通過繼承獲得。所以乙個cell（td/th）的text-align，要麼來自於匹配td/th的規則，要麼來自於tr,tbody,table等祖先元素。而col/colgroup不可能是其祖先元素。

因此儘管這個需求被開發者要求了十多年，但是始終未能滿足。最終還是需要通過更新css規範，創造新的combinator和偽類來實現。

下面談你這個需求：

一、table元素應該用於真的**，所謂真的**即二維資料表。從你的需求來看，其實並不像是真的資料表。因此不建議用table元素。

二、其實你可以使用 nth-child 來實現你要的效果。

但是方法我們可以利用css3中的偽類選擇符（e：nth-child(n)或e：nth-of-type(n)）實現想要的效果。（具體屬性介紹詳見css3參考手冊   進入）

我們可以用如下css樣式，實現前兩列文字右對齊，和背景顏色的修改：

/*

代表意思為 選中 父級元素tr下的 第乙個 th，第二個th，第乙個td，第二個td
*/th:nth-of-type(1) , th:nth-of-type(2) , td:nth-of-type(1) , td:nth-of-type(2) 

此種方法不止可以用於文字對齊，背景顏色，基本上所有的css屬性，都可以得到很好的體現（但是**的單元格td不支援margin屬性，利用cellspacing屬性可以代替使用時必須確定單元格之間相互獨立即不能定義border-collapse:collapse;，但css定義了border-spacing，能夠分離單元格的間隙，取值包括乙個值或兩個值，當定義乙個值時，則定義單元格行間距和列間距都為該值，建議使用css來定義；但cellpading可以完全用padding屬性代替，來定義單元格的補白）。詳情可查閱css88的css3產考手冊；

最後總結：

「colgroup」和「col」這兩個標籤存在嚴重的瀏覽器相容問題，在chrome、firefox、safari等瀏覽器中都只支援背景色、寬度等少數幾種樣式屬性，所以建議最好不要使用。可以用文章中提到的css3偽類選擇符的方法實現，想要的的效果。

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

在使用bootstrap時，有時候並不希望在整個 上使用 bootstrap，您只需要使用bootstrap css的一部分。如果只是將 bootstrap css 直接新增到 head 中，就有可能會與其他的 css 產生衝突，從而產生混亂的樣式。選擇重寫css樣式讓其覆蓋原有的樣式，如依然沒有得...

CSS樣式定義的優先順序順序總結

css樣式定義的優先順序順序總結 層疊優先順序是 瀏覽器預設 外部樣式表 內部樣式表 內聯樣式 其中樣式表又有 類選擇器 類派生選擇器 id選擇器 id派生選擇器 派生選擇器以前叫上下文選擇器，所以完整的層疊優先順序是 瀏覽器預設 外部樣式表 外部樣式表類選擇器 外部樣式表類派生選擇器 外部樣式表i...

CSS樣式定義的優先順序順序總結

css樣式定義的優先順序順序總結 層疊優先順序是 瀏覽器預設 外部樣式表 內部樣式表 內聯樣式 其中樣式表又有 類選擇器 類派生選擇器 id選擇器 id派生選擇器 派生選擇器以前叫上下文選擇器，所以完整的層疊優先順序是 瀏覽器預設 外部樣式表 外部樣式表類選擇器 外部樣式表類派生選擇器 外部樣式表i...