由於web自動化測試中，會用到比較複雜的定位方式：CSS定位，這種定位方式比較簡潔，定位速度較快，所以繼續學習前端的CSS知識，總結下學習筆記，以便後續檢視。同時，也希望能幫助到大家。

    CSS 指層疊樣式表 (Cascading Style Sheets)。樣式定義如何顯示 HTML 元素。樣式通常儲存在樣式表（CSS檔案）中。外部樣式表可以極大提高工作效率。

目錄

CSS語法

CSS屬性

CSS語法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條宣告。宣告由屬性值對組成。

selector {屬性1：屬性1值; 屬性2：屬性2值; ... 屬性N：屬性N值;

若屬性值有空格，屬性值記得加引號。

CSS選擇器selector

關於selenium的CSS定位，也有對CSS選擇器定位說明。

兩者選擇器語法一樣，一個通過CSS定位到元素，對元素進行操作。一個通過CSS定位到元素，對元素設定相關樣式。

1.單個標籤

如：h1{...}

2.多個標籤

如：h1,h2,h3,h4,h5,h6{...}

3.樣式繼承

如：body{...},那麼body下的子元素如 p, td, ul, ol, ul, li, dl, dt,和 dd都繼承body的屬性。

但如何子元素重新定義樣式，優先子元素自己的樣式。

如：p{...}，則p標籤下就按照自己所設定的樣式來。

4.派生選擇器

通過依據元素在其位置的上下文關係來定義樣式。

4.1後代選擇器

有關後代選擇器有一個易被忽視的方面，即兩個元素之間的層次間隔可以是無限的。

例如，如果寫作 ul em，這個語法就會選擇從 ul 元素繼承的所有 em 元素，而不論 em 的巢狀層次多深。

如：ul em{...}，則ul下面的em元素設定相應的樣式。

4.2子元素選擇器

與後代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。

如：ul > em{...}

4.3相鄰兄弟選擇器

如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器

如：h1 + p {margin-top:50px;}，選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素

5.id選擇器

語法：#id屬性值

例項1：id為center的所有元素設定樣式。

#center {text-align: center}

例項2：id為fancy的元素內部的表格單元td元素設定樣式。

#fancy td {
color: #f60;
background: #666;
}

例項3：id為fancy的表格單元td元素設定樣式。

td#fancy {
color: #f60;
background: #666;
}

6.類選擇器

語法：.class屬性值

例項1：類名為center的所有元素設定樣式。

.center {text-align: center}

例項2：類名為fancy的元素內部的表格單元td元素設定樣式。

.fancy td {
color: #f60;
background: #666;
}

例項3：類名為fancy的表格單元td元素設定樣式。

td.fancy {
color: #f60;
background: #666;
}

7.屬性選擇器

語法：[屬性]或[屬性=屬性值]

8.連結選擇器

a:link - 普通的、未被訪問的連結。a:visited - 使用者已訪問的連結。a:hover - 滑鼠指標位於連結的上方。a:active - 連結被點選的時刻。

例項：

a:link {color:#FF0000;} /* 未被訪問的連結 */
a:visited {color:#00FF00;} /* 已被訪問的連結 */
a:hover {color:#FF00FF;} /* 滑鼠指標移動到連結上 */
a:active {color:#0000FF;} /* 正在被點選的連結 */

CSS屬性

color：字型顏色：如red或#ff0000。

font-family：字型樣式，如Times。

font-style：最常用於規定斜體文字。normal（文字正常顯示）。italic（文字斜體顯示）。oblique （文字傾斜顯示）

font-weight：設定文字的粗細，如使用 bold 關鍵字可以將文字設定為粗體。

font-size：字型大小，如14px。

text-align:文字對齊方式，如center（居中）。

text-transform：字元轉換：none（無），uppercase（大寫），lowercase（小寫），capitalize（首字母大寫）。

text-decoration：文字裝飾屬性。none（無，如連結不加下劃線）。underline 會對元素加下劃線。overline 會在文字的頂端畫一個上劃線。值 line-through 則在文字中間畫一個貫穿線。blink 會讓文字閃爍。

background-color：背景顏色。

list-style-type：ul列表的列表項標誌型別。如square（設定為方塊）

如何插入樣式表