最近想學習自動化測試--web元素的匹配查詢，一直搞不懂css的相關標籤與對元素的渲染方式。
本文**w3school:
當同乙個 html 元素被不止乙個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
瀏覽器預設設定
外部樣式表
內部樣式表（位於 標籤內部）
內聯樣式（在 html 元素內部）
因此，內聯樣式（在 html 元素內部）擁有最高的優先權，這意味著它將優先於以下的樣式宣告：標籤中的樣式宣告，外部樣式表中的樣式宣告，或者瀏覽器中的樣式宣告（預設值）。
當讀到乙個樣式表時，瀏覽器會根據它來格式化 html 文件。插入樣式表的方法有三種：
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變乙個檔案來改變整個站點的外觀。每個頁面使用 標籤鏈結到樣式表。標籤在（文件的）頭部：
<head
>
<
link
rel="stylesheet"
type
="text/css"
href
="mystyle.css"
/>
head
>
瀏覽器會從檔案 mystyle.css 中讀到樣式宣告，並根據它來格式文件。
hrp body
不要在屬性值與單位之間留有空格。假如你使用 「margin-left: 20 px」 而不是 「margin-left: 20px」 ，它僅在 ie 6 中有效，但是在 mozilla/firefox 或 netscape 中卻無法正常工作。
當單個文件需要特殊的樣式時，就應該使用內部樣式表。你可以使用 標籤在文件頭部定義內部樣式表，就像這樣:
<head
>
<
style
type
="text/css"
>
hr p
body
style
>
head
>
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在乙個元素上應用一次時。
<p style
="color: sienna; margin-left: 20px"
>
this is a paragraph
p>
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。
例如，外部樣式表擁有針對 h3 選擇器的三個屬性：
h3
而內部樣式表擁有針對 h3 選擇器的兩個屬性：
h3
color: red;text-align: right;
font-size: 20pt;
即顏色屬性將被繼承於外部樣式表，而文字排列（text-alignment）和字型尺寸（font-size）會被內部樣式表中的規則取代。
css 優先順序
當我們的css樣式中，如果同個元素有兩個或以上衝突的css規則，瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出，也就是常講的css優先順序。一般情況下，你不必擔心css樣式衝突，但對於大型而且複雜的css樣式檔案，或有很多css檔案組成的，就非常有可能產生衝突。下面我們通過2個簡單的例項來了解一下...
css優先順序
今天在使用公司內部框架的時候，發現乙個問題。我在頁面的style元素裡面寫了乙個class選擇器，可是卻不起作用。使用f12檢視，發現是當前的樣式沒有起作用，而是被框架生成的樣式代替掉了。當然，寫內嵌的樣式肯定是沒問題。可問題就是，我明明在頁面內部寫了樣式，按照常理，應該是我手寫的類選擇器的優先順序...
css優先順序
css樣式分為 外部樣式，內部樣式，內聯樣式 選擇器優先權 1.內聯樣式表的權值最高 1000 2.id 選擇器的權值為 100 3.class 類選擇器的權值為 10 4.html 標籤選擇器的權值為 1 css 優先順序法則 a 選擇器都有乙個權值，權值越大越優先 b 當權值相等時，後出現的樣式...