1. 首頁
  2. 問答
  3. 有沒有證據證明CSS的順序是相關的？

有沒有證據證明CSS的順序是相關的？

2016-10-12 70 views
-1

如果我的CSS在其他樣式的末尾訂購全局（父）樣式，這有什麼關係嗎？就我個人而言，我有一種理論認爲，樣式標籤中的所有樣式都是先解析後處理（設置後繼）。這只是一個理論，在不同的瀏覽器中它可能會有所不同。如果在之後處理所有的CSS樣式標籤被解析，那麼順序應該不重要。有沒有證據證明CSS的順序是相關的？

例如展品B比展品快A？你能證明這個嗎？圖表B具有全球風格（*，HTML，Body），在開始處訂購。

附錄A：

<style> 

    #VGroup2210 { 
     position:absolute; 
     top:35px; 
     left:25px; 
     overflow:visible; 
     text-align:left; 
    } 

    #Label2211 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     font-weight:bold; 
     margin-top:-0.2em; 
    } 

    #Label2212 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2213 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2214 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2215 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2216 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2217 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2218 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2219 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2220 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2221 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2222 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2223 { 
     position:relative; 
     vertical-align:top; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #BorderContainer2224 { 
     position:absolute; 
     top:30px; 
     left:100px; 
     width:562px; 
     height:50px; 
     display:inline-block; 
     background-color:rgba(255,255,255,1); 
     border-style:solid; 
     border-width:1px; 
     border-color:#696969; 
     border-radius:0px; 
    } 

    #HGroup2229 { 
     position:absolute; 
     top:30px; 
     left:101px; 
     min-width:20px; 
     min-height:20px; 
     height:50px; 
     display:inline-block; 
     overflow:visible; 
     text-align:left; 
    } 

    #Label2230 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2231 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2232 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2233 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2234 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2235 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2236 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2237 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2238 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-top:-0.2em; 
    } 

    #HGroup2239 { 
     position:absolute; 
     top:166px; 
     left:209px; 
     min-width:20px; 
     min-height:20px; 
     overflow:visible; 
     text-align:left; 
    } 

    #Label2240 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:2px; 
     font-weight:bold; 
     margin-top:-0.2em; 
    } 

    #BorderContainer2241 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:2px; 
     width:300px; 
     height:250px; 
     display:inline-block; 
     background-color:rgba(255,255,255,1); 
     border-style:solid; 
     border-width:1px; 
     border-color:#696969; 
     border-radius:0px; 
     font-size:9px; 
    } 

    #Label2246 { 
     position:absolute; 
     top:20px; 
     left:20px; 
     margin-top:-0.2em; 
    } 

    #Label2248 { 
     position:absolute; 
     top:20px; 
     display:table; 
     left:50%; 
     transform:translateX(-50%); 
     -webkit-transform:translateX(-50%); 
     -ms-transform:translateX(-50%); 
     margin-top:-0.2em; 
    } 

    #Label2249 { 
     position:absolute; 
     top:20px; 
     right:20px; 
     margin-top:-0.2em; 
    } 

    #Label2250 { 
     position:absolute; 
     display:table; 
     top:50%; 
     transform:translateY(-50%); 
     -webkit-transform:translateY(-50%); 
     -ms-transform:translateY(-50%); 
     left:20px; 
     margin-top:-0.2em; 
    } 

    #Label2251 { 
     position:absolute; 
     display:table; 
     top:50%; 
     transform:translateY(-50%); 
     -webkit-transform:translateY(-50%); 
     -ms-transform:translateY(-50%); 
     right:20px; 
     margin-top:-0.2em; 
    } 

    #Label2252 { 
     position:absolute; 
     bottom:20px; 
     left:20px; 
     margin-top:-0.2em; 
    } 

    #Label2253 { 
     position:absolute; 
     bottom:20px; 
     display:table; 
     left:50%; 
     transform:translateX(-50%); 
     -webkit-transform:translateX(-50%); 
     -ms-transform:translateX(-50%); 
     margin-top:-0.2em; 
    } 

    #Label2254 { 
     position:absolute; 
     bottom:20px; 
     right:20px; 
     margin-top:-0.2em; 
    } 

    #Label2255 { 
     position:absolute; 
     display:table; 
     top:50%; 
     left:50%; 
     transform:translate(-50%,-50%); 
     -webkit-transform:translate(-50%,-50%); 
     -ms-transform:translate(-50%,-50%); 
     margin-top:-0.2em; 
    } 

    #Label2256 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     font-weight:bold; 
     margin-top:-0.2em; 
    } 

    /* Global styles */ 

    *, *:before, *:after { 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
     box-sizing:border-box; 
    } 

    html, body { 
     width:100%; 
     height:100%; 
     margin:0; 
     padding:0; 
    } 

    body { 
     font-family:Verdana; 
     font-weight:normal; 
     font-size:12px; 
    } 
</style>

圖表B：

<style> 

    /* Global styles */ 

    *, *:before, *:after { 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
     box-sizing:border-box; 
    } 

    html, body { 
     width:100%; 
     height:100%; 
     margin:0; 
     padding:0; 
    } 

    body { 
     font-family:Verdana; 
     font-weight:normal; 
     font-size:12px; 
    } 

    #VGroup2210 { 
     position:absolute; 
     top:35px; 
     left:25px; 
     overflow:visible; 
     text-align:left; 
    } 

    #Label2211 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     font-weight:bold; 
     margin-top:-0.2em; 
    } 

    #Label2212 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2213 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2214 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2215 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2216 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2217 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2218 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2219 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2220 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2221 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2222 { 
     position:relative; 
     vertical-align:top; 
     margin-bottom:12px; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #Label2223 { 
     position:relative; 
     vertical-align:top; 
     display:block; 
     margin-top:-0.2em; 
    } 

    #BorderContainer2224 { 
     position:absolute; 
     top:30px; 
     left:100px; 
     width:562px; 
     height:50px; 
     display:inline-block; 
     background-color:rgba(255,255,255,1); 
     border-style:solid; 
     border-width:1px; 
     border-color:#696969; 
     border-radius:0px; 
    } 

    #HGroup2229 { 
     position:absolute; 
     top:30px; 
     left:101px; 
     min-width:20px; 
     min-height:20px; 
     height:50px; 
     display:inline-block; 
     overflow:visible; 
     text-align:left; 
    } 

    #Label2230 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2231 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2232 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2233 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2234 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2235 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2236 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2237 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:8px; 
     margin-top:-0.2em; 
    } 

    #Label2238 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-top:-0.2em; 
    } 

    #HGroup2239 { 
     position:absolute; 
     top:166px; 
     left:209px; 
     min-width:20px; 
     min-height:20px; 
     overflow:visible; 
     text-align:left; 
    } 

    #Label2240 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:2px; 
     font-weight:bold; 
     margin-top:-0.2em; 
    } 

    #BorderContainer2241 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     margin-right:2px; 
     width:300px; 
     height:250px; 
     display:inline-block; 
     background-color:rgba(255,255,255,1); 
     border-style:solid; 
     border-width:1px; 
     border-color:#696969; 
     border-radius:0px; 
     font-size:9px; 
    } 

    #Label2246 { 
     position:absolute; 
     top:20px; 
     left:20px; 
     margin-top:-0.2em; 
    } 

    #Label2248 { 
     position:absolute; 
     top:20px; 
     display:table; 
     left:50%; 
     transform:translateX(-50%); 
     -webkit-transform:translateX(-50%); 
     -ms-transform:translateX(-50%); 
     margin-top:-0.2em; 
    } 

    #Label2249 { 
     position:absolute; 
     top:20px; 
     right:20px; 
     margin-top:-0.2em; 
    } 

    #Label2250 { 
     position:absolute; 
     display:table; 
     top:50%; 
     transform:translateY(-50%); 
     -webkit-transform:translateY(-50%); 
     -ms-transform:translateY(-50%); 
     left:20px; 
     margin-top:-0.2em; 
    } 

    #Label2251 { 
     position:absolute; 
     display:table; 
     top:50%; 
     transform:translateY(-50%); 
     -webkit-transform:translateY(-50%); 
     -ms-transform:translateY(-50%); 
     right:20px; 
     margin-top:-0.2em; 
    } 

    #Label2252 { 
     position:absolute; 
     bottom:20px; 
     left:20px; 
     margin-top:-0.2em; 
    } 

    #Label2253 { 
     position:absolute; 
     bottom:20px; 
     display:table; 
     left:50%; 
     transform:translateX(-50%); 
     -webkit-transform:translateX(-50%); 
     -ms-transform:translateX(-50%); 
     margin-top:-0.2em; 
    } 

    #Label2254 { 
     position:absolute; 
     bottom:20px; 
     right:20px; 
     margin-top:-0.2em; 
    } 

    #Label2255 { 
     position:absolute; 
     display:table; 
     top:50%; 
     left:50%; 
     transform:translate(-50%,-50%); 
     -webkit-transform:translate(-50%,-50%); 
     -ms-transform:translate(-50%,-50%); 
     margin-top:-0.2em; 
    } 

    #Label2256 { 
     position:relative; 
     display:inline-block; 
     vertical-align:middle; 
     font-weight:bold; 
     margin-top:-0.2em; 
    } 

</style>

HTML：

<div id="VGroup2210"> 
    <span id="Label2211">Left</span> 
    <span id="Label2212">Apple</span> 
    <span id="Label2213">Orange</span> 
    <span id="Label2214">Banana</span> 
    <span id="Label2215">Grape</span> 
    <span id="Label2216">Cherry</span> 
    <span id="Label2217">Mango</span> 
    <span id="Label2218">Kiwi</span> 
    <span id="Label2219">Pineapple</span> 
    <span id="Label2220">Strawberry</span> 
    <span id="Label2221">Blueberry</span> 
    <span id="Label2222">Raspberry</span> 
    <span id="Label2223">Orange</span> 
</div> 
<div id="BorderContainer2224">&#160; 
</div > 
<div id="HGroup2229"> 
    <span id="Label2230">Apple</span> 
    <span id="Label2231">Orange</span> 
    <span id="Label2232">Banana</span> 
    <span id="Label2233">Grape</span> 
    <span id="Label2234">Cherry</span> 
    <span id="Label2235">Mango</span> 
    <span id="Label2236">Kiwi</span> 
    <span id="Label2237">Pineapple</span> 
    <span id="Label2238">Strawberry</span> 
    <span style='display:inline-block;height:100%;width:0;vertical-align:middle;'></span> 
</div> 
<div id="HGroup2239"> 
    <span id="Label2240">Left</span> 
    <div id="BorderContainer2241"> 
     <span id="Label2246">Top Left</span> 
     <span id="Label2248">Top Centered</span> 
     <span id="Label2249">Top Right</span> 
     <span id="Label2250">Left Center</span> 
     <span id="Label2251">Right Center</span> 
     <span id="Label2252">Bottom Left</span> 
     <span id="Label2253">Bottom Centered</span> 
     <span id="Label2254">Bottom Right</span> 
     <span id="Label2255">Center</span> 
    </div > 
    <span id="Label2256">Right</span> 
    <span style='display:inline-block;height:100%;width:0;vertical-align:middle;'></span> 
</div>

是否跨越b中的相同rowsers？

來源

2016-10-12 1.21 gigawatts

+0

感謝所有反對票的傢伙！你們都很棒。 –

回答

1

經過一些測試後，我得出結論，在我的電腦上，exibit A需要7毫秒的平均加載時間，並且B17毫秒，這兩個數字都是平均10次運行每個exibit並可能在您的設備上不一樣，但是，我猜這是無關緊要你聲明你的CSS

來源

2016-10-12 08:40:35 Grey

+0

感謝您的測試。有人告訴我說，圖表B會更快，因爲所有的全球風格都在開始。這是一個有趣的發現。如果我可能會問什麼瀏覽器？ –

+1

目前在工作，所以我被迫使用Internet Explorer 11，我使用了微軟邊緣調試 – Grey

相關問題

 相關問題