由於web自動化測試中,會用到比較復雜的定位方式:CSS定位,這種定位方式比較簡潔,定位速度較快,所以繼續學習前端的CSS知識,總結下學習筆記,以便后續查看。同時,也希望能幫助到大家。
學習網址:http://www.w3school.com.cn/css/css_intro.asp
CSS 指層疊樣式表 (Cascading Style Sheets)。樣式定義如何顯示 HTML 元素。樣式通常存儲在樣式表(CSS文件)中。外部樣式表可以極大提高工作效率。
CSS 規則由兩個主要的部分構成:選擇器,以及一條或多條聲明。聲明由屬性值對組成。
selector {屬性1:屬性1值; 屬性2:屬性2值; ... 屬性N:屬性N值; }
若屬性值有空格,屬性值記得加引號。
可查看另一篇博文:http://www.cnblogs.com/yufeihlf/p/5717291.html#test7
關於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;} /* 正在被點擊的鏈接 */
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(設置為方塊)
詳見另外一篇博文:關於外部樣式表,內部樣式表,內聯樣式的說明:w3school之HTML學習筆記-CSS樣式表標簽
