css視覺差異ids和類

這是令人難以置信的奇怪，但檢查出以下的HTML和CSS。這工作得很好，只要我離開表和tableWrapper作爲爲他們定義的ID的元素css視覺差異ids和類

如果我試圖讓他們的類（改變＃在.css中）和改變ID爲類的HTML元素然後圓形類不再包含在tableWrapper中（它們延伸到它的邊界之外）。我真的非常驚訝，因爲我從來沒有想過某件事是一個id還是一個班級可能會影響佈局，但我發現IE10和Google Chrome v25都會發生這種情況。

我不是在尋找解決這個特定問題的方法。我正在尋找理解並希望能夠鏈接到一些w3c文檔，解釋它爲什麼會發生，以及我對此有什麼期望。

   <html> 
       <head> 
       <style> 
        .circle{ 
         background-color:red; 
         border-radius:50%; 
         height:90%; 
         width:100%; 
         colore:white; 
         top:7%; 
         position:absolute; 

         left:0px; 

        } 
        .innerCircle{ 
         border-radius:50%; 
        background-color:white; 
         position:absolute; 
         top:12%; 
         z-index:2; 
         left:5%; 
         height:80%; 
         width:90%; 

        } 
        #navBar{ 
        background-color:black; 
        color:white; 
        width:100%; 
        height:7%; 
        } 
        #table{ 
         height:550px; 
         border:solid 1px black                            ; 
         width:500px; 
         position:absolute; 
         top:0px; 
        } 
        #tableWrapper{ 
         height:90%; 
         width:100%; 
        } 

       </style> 
       </head> 

       <body> 
        <div id="table"> 


         <div id="navBar"> 
          Room info 
         </div> 
         <div id="tableWrapper"> 

          <div class="circle"> 

          </div> 
          <div class="innerCircle"> 

          </div> 
         </div> 

        </div> 
        <input type="text" id="xval" style="float:right" /> 

        <input type="text" id="yval" style="float:right" /> 
       </body> 
      </html>

來源

2013-03-09 flips

你能提供jsFiddle的例子嗎？我很確定這是關於CSS優先系統的。 – MarcinJuraszek 2013-03-09 21:07:04

對我沒有改變http://jsfiddle.net/B6b7s/ – 2013-03-09 21:07:46

我不知道是否可能是因爲特異性以及ID的處理方式與Classes不同。即ID比類具有更高的特異性。如果您的容器是一個類並且您的元素是一個ID，那麼具有ID的元素將覆蓋可能在類級別設置的任何設置。

下面是一些更多的信息 http://css-tricks.com/specifics-on-css-specificity/

來源

2013-03-09 21:30:56 HAL9256

改變一個ID一類會影響選擇的特異性的鏈接，請http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/。簡單地說，ID是一個比類更具體的選擇器，因爲它在頁面上是唯一的。如果一個元素可以選擇多個規則，那麼將應用最具體的元素，否則如果所有元素都具有相同的特性，那麼「級聯順序」（基本上是聲明規則的順序）很重要。在樣式表覆蓋規則中出現的規則更高，具有相同的特徵。

在http://specificity.keegan.st/有一個很棒的特異性計算器，它可以幫助你理解在任何給定的情況下哪個選擇器會勝出。

也可能存在與同名的類命名衝突。

爲了真正瞭解發生了什麼，我強烈建議您在您選擇的瀏覽器中使用開發工具 - 我個人建議使用Chrome開發人員工具，但Firefox具有相當不錯的設置，不論是本機還是使用流行的Firebug擴展。右鍵點擊一個元素並選擇「檢查元素」（在大多數瀏覽器中）將允許您查看所有匹配的選擇器，已應用的規則以及已被覆蓋的規則。

來源

2013-03-09 21:34:21 pwdst

css視覺差異ids和類

回答

相關問題