2017-09-01 37 views
-2
<table class="table table-striped"> 
     <thead> 
      <tr> 
       <th>#</th> 
       <th>Firstname</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>Anna</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>Debbie</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>John</td> 
      </tr> 
     </tbody> 
</table> 

它是從引導例如片段。 注意到它在一個標籤中有多個類,所以這兩個類之間有什麼關係?看來表條紋的子類?HTML多類在一個標籤

以及如何將CSS改變這個元素的樣式?請問錶款風格覆蓋風格嗎?

此外,我應該如何選擇這個類的元素?

回答

1

我看你還是學的東西在這裏,如果我要表明,它是更爲更好的學習着想遠離框架背離的第一,直到你學會了基本的東西是如何工作的,向前跳躍只會引起併發症。雖然反正:

你提到的類沒有關係可言,實際上所有的CSS類沒有關係的。他們站在了自己的例子:

.table { 
    border: 1px solid black; 
    width: 100%; 
    // other common properties you find in a table 
} 

還有其他雲:

.table-striped { 
    border: 1px dashed black; 
    // other properties you can find on a striped table 
} 

如您在包含tabletable-striped將只覆蓋的table共同特性的表調用table-striped這是border並將其應用於元素。

它是如何覆蓋的?這是我在CSS中調用的優先級,無論哪種風格最後一次總是應用,儘管稍後您會遇到CSS覆蓋不適用於所有IF選擇器不匹配。

而最後一件事:沒關係你怎麼選擇班級爲:

.table { 
    // stuff 
} 

.table-striped { 
    // stuff 
} 

// if selector contains both classes 
.table.table-striped { 
    // stuff 
} 

// if a table element contains .table class 
table.table { 
    // stuff 
} 

// and so on... 

不會在所有問題。希望能幫助你理解。

+0

很好的回答!根據我的經驗,'.table-striped'通常意味着偶數行和奇數行有不同的背景顏色。 –

+0

它只是「.table-striped」可以提供的「其他」屬性。因爲我的例子只適用於頂層元素,所以後面會出現'.table striped tr td:nth-​​child(even){// stuff}',這是你在'.table'類中找不到的。 – masterpreenz

+0

如果你覺得它有幫助並回答您的問題,不要忘記將其標記爲答案。 – masterpreenz

0

瀏覽器將使用的值來自兩類,並將其應用到該元素。

您可以根據每個人或兩者

​​

+0

如果在css中爲cls-a和cls-b存在相同attr的衝突,該怎麼辦?哪一個會被壓制?並且順序是否重要?我的意思是class =「cls -a cls-b」和class =「cls -b cls -a」 –

+0

這與css中的特異性有關,你可以檢查這個例子:https://css-tricks.com/specifics -on-css-specificity/ – Dekel

0

多個類選擇元素也並不意味着他們有任何關係彼此。據我所知,<table class="table table-striped"><table class="table-striped table ">完全一樣。

你會使用它的類選擇該表具有下列任何組合:

  • .table
  • .table-stripped
  • .table.table-stripped.table-stripped.table

如何的CSS將受到影響取決於樣式。通過名字,我會假設.table將它作爲所有引導表格。 .table-stripped會爲奇數行和偶數行添加不同的背景顏色。 Example

+0

使用屬性選擇器時,css類的排序只是重要的問題 – Nova

0

這些只是引導CSS樣式,你可以根據需要在一個元件上有儘可能多類。您可以在添加表格後添加一個類,創建自己的.css文件並根據需要進行編輯。或者,您可以將ID添加到表格中並以此爲樣式。