CSS選擇器分組：element.class元素element.class元素 - 它選擇了什麼？

Question

我有一個CSS提供了包含以下代碼

table.exm_table tbody tr.odd td{ 
    background-color:#ffffff; 
} 

我不知道什麼應該它的風格。以下結構中的td元素將設置背景顏色嗎？

<table class="exm_table"> 
    <tbody> 
     <tr class="odd"> 
      <td>Is this an selected element?</td> 
     </tr> 
    </tbody> 
</table> 

編輯：

其實我已經忽略了CSS的第二部分：

table.exm_table tbody tr:nth-child(odd) td, 
table.exm_table tbody tr.odd td 

這引起我的困惑爲什麼代碼一直沒工作......

Answer 1

您初始css目標td並將背景設置爲白色（#fff）

---

你可以只針對類直接

.exm_table { 
    background-color:#ffffff; 
} 
.odd { 
    background-color:#eeeeee; 
} 

Answer 2

你的HTML 是 是不正確的，但是，否則CSS將工作主攻td。請注意，在您的（原始）示例中沒有表格行<tr>。你會看到它的工作原理與該修正的加價：

<table class="exm_table"> 
    <tbody> 
     <tr class="odd"> 
      <td>Is this an selected element?</td> 
     </tr> 
    </tbody> 
</table> 

http://jsfiddle.net/8zan1jyf/

正如你所看到的，你的CSS選擇器並解決td - 或者更具體地說：

任何td a tr（其具有類別'odd'）在 a tbody內一個table（具有類名'exm_table'）

有可能無需是想象中的那麼具體，）

UPDATE

既然你已經編輯在這裏你的問題是關於一些進一步的信息似乎讓你感到困惑的交替排列風格。

table.exm_table tbody tr:nth-child(odd) td使用nth-child選擇器在交替行中獲取tds。

table.exm_table tbody tr.odd td只是簡單地選擇類名爲「奇數」的trs中的所有tds。 （這是這個類名，可能是令人困惑，因爲它無關，與奇/偶本身並可以很容易地被稱爲「鮑勃」）

這裏有一個演示，幫助澄清：http://jsfiddle.net/8zan1jyf/8/

/* to style ALL tds */ 
table.exm_table tbody tr td {background-color:pink;} 
/* to style EVERY-OTHER td */ 
table.exm_table tbody tr:nth-child(odd) td {background-color:red;} 
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'odd' (nothing to do with actual odd/even ordering) */ 
table.exm_table tbody tr.odd td {background-color:blue;} 
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'bob' */ 
table.exm_table tbody tr.bob td {background-color:green;}