言

大部分人在使用selenium定位元素時，用的是xpath定位，因為xpath基本能解決定位的需求。css定位往往被忽略掉了，其實css定位也有它的價值，css定位更快，語法更簡潔。
這一篇css的定位方法，主要是對比上一篇的xpath來的，基本上xpath能完成的，css也可以做到。兩篇對比學習，更容易理解。

CSS 選擇器：

常見符號：

#表示 id選擇器
.表示 class選擇器
>表示子元素，層級
一個空格也表示子元素，但是是所有的后代子元素，相當于 xpath 中的相對路徑

一、css:屬性定位

1.css可以通過元素的id、class、標簽這三個常規屬性直接定位到

2.如下是百度輸入框的的html代碼：

<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"/>

3.css用#號表示id屬性,如：#kw

4.css用.表示class屬性，如：.s_ipt

5.css直接用標簽名稱，無任何標示符，如：input

二、css:其它屬性

1.css除了可以通過標簽、class、id這三個常規屬性定位外，也可以通過其它屬性定位

2.以下是定位其它屬性的格式
[name=wd] [autocomplete='off'][maxlength='255']

三、css:標簽

css頁可以通過標簽與屬性的組合來定位元素
input.s_ipt input#kw input[id='kw']

四、css:層級關系

//form的id屬性
form#form>span>input
//form的class屬性
form.fm>span>input

五、css:索引

css也可以通過索引nth-child(1)來定位子元素，直接翻譯過來就是第幾個小孩
總結：選擇標簽后，找第幾個小孩即可
Select控件第三個Opel
#select>select>option:nth-child(3)
CheckBox第一個Volvo
#checkbox>input:nth-child(1)

CheckBox第二個Saab
#checkbox>input:nth-child(4)
RadioBox第二個Saab
#radio>input:nth-child(4)

通過索引nth-of-type(2)來定位子元素，按照分類指定

選擇select的saab
#select>select>option:nth-of-type(2);

選擇 id 為 radio 的 div 下的第 1 個子節點
div#radio>input:nth-of-type(4)+label

選擇id 為radio 的div 下的第4 個input 節點之后挨著的 label
節點
div#radio>input:nth-of-type(4)~label

六、css:邏輯運算

css同樣也可以實現邏輯運算，同時匹配兩個屬性，這里跟xpath不一樣，無需寫and關鍵字
[type='checkbox'][name='checkbox1']

css語法遠遠不止上面提到的，還有更多更強大定位策略，有興趣的同學可以繼續深入研究！

如覺得文章對您有幫助，還請幫忙轉發！

一章講了selenium提供了多種元素定位方法，今天學習元素定位之css定位

CSS定位：

CSS（Cascading Style Sheets）是一種語言，它用來描述HTML和XML文檔的表現。CSS使用選擇器來為頁面元素綁定屬性。這些選擇器可以被selenium用作另外的定位策略。

CSS可以較為靈活的選擇空間的任意屬性，一般情況下定位速度要比XPath快，但對于初學者來說學習起來稍微有點難度，下面我們就詳細地介紹CSS的語法與使用。

下面同樣以百度輸入框和搜索按鈕為例介紹CSS定位的用法。

<span class=’bg s_ipt_wr’>

<input id=’kw’ class=’s_ipt’ sutocomplete=’off’ maxlength=’100’ value=’’ name=’wd’

</span>

<span class=’bg s_ipt_wr’>

<input id=’su’ class=’bg s_btn’ type=’submit’ value=’百度一下’

</span>

...

1）通過class屬性定位：

find_element_by_css_selector(‘.s_ipt’)

find_element_by_css_selector(‘.bg s_btn’)

find_element_by_css_selector()方法用于CSS語言定位元素，點號(.)表示通過class屬性來定位元素。

2）通過id屬性定位：

find_element_by_css_selector(‘#kw’)

find_element_by_css_selector(‘#su’)

井號(#)表示通過id屬性來定位元素

3）通過標簽名定位：

find_element_by_css_selector(‘input’)

在CSS語言中，用標簽名定位元素不需要任何符號標識，直接使用標簽名即可。但我們前面已經了解了，標簽名重復的概率非常大，所以通過這種方式很難找到想要的元素。

我們可以通過以下幾種方式來使標簽名查找方式生效：

1、通過父子關系定位：

find_element_by_css_selector(‘span>span’)

上面的寫法表示有父親，它的標簽名為span，查找它的所有標簽名交input的子元素

2、通過屬性定位：

find_element_by_css_selector(“[autocomplete=off]”)

find_element_by_css_selector(“[name=’kw’]”)

find_element_by_css_selector(“[type=’submit’]”)

在CSS當中也可以使用元素的任意屬性，只要這些屬性可以唯一標識這個元素。對于屬性值來說，可加引號，也可以不加，但注意和整個字符串的引號進行區分。

3、組合定位：

我們當然可以把上面的定位策略組合起來使用，這就大大加強了定位元素的唯一性。

find_element_by_css_selector(“span.bg s_ipt_wr>input.s_ipt”)

find_element_by_css_selector(“span.bg s_ipt_wr>input#su”)

有一個父元素，它的標簽名叫span；它有一個class屬性值叫bg s_ipt_wr；它有一個子元素，標簽名叫inout，并且這個子元素的class屬性值叫s_ipt。好吧，我們要找的就是具有這么多特征的一個子元素。

一篇文章說了HTML，現在再來說一說CSS，所謂CSS是指層疊樣式表 (Cascading Style Sheets)，通過引入樣式表，從而極大的提高了工作效率。

搭配視頻觀看效果更佳~~

Web前端開發零基礎入門HTML/CSS/JavaScript

https://www.ixigua.com/6907467670300393988

什么是CSS？

Cascading Style Sheet

層疊樣式表語言（不是編程語言，屬于樣式表語言，沒有變量、數據類型、控制語句...）

CSS其實是專門用來修飾HTML的，讓HTML更好看。

CSS是HTML的化妝品。

CSS是為HTML服務的，所以HTML還是主體，CSS是依附在HTML上的，

所以進行CSS的開發，我們還是需要新建html/htm文件。

在HTML中怎么嵌入CSS樣式呢？

第一種方式：內聯定義

第二種方式：定義內部樣式塊對象

第三種方式：鏈入外部樣式表文件（這種方式最常用！）

關于選擇器的優先級：

• 標簽選擇器優先級最低。
• 其次是類選擇器。
• 最高優先級是id選擇器。

CSS設置背景(background)

• 背景顏色 background-color
• 背景圖片 background-image
• 背景重復 background-repeat:repeat-x/repeat-y
• 背景位置 background-position:bottom/left/top/right/center
• 背景關聯 background-attachment:fixed/scroll

綜合寫法：

.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

CSS設置文本格式

通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。

文本縮進 ：Text-indent:2em

文本對齊方式：Text-align:left/right/center/ justify

文本修飾：Text-decoration:underline/line-through/overline/none

字符間距：Word-spacing:px/em 英文單詞之間的間隔；

Letter-spacing:px/em漢字和英文字母之間的間隔；

文本轉換：Text-transform:uppercase/lowercase/ capitalize

行與行間距：Line-height:px/%

垂直對齊圖像： vertical-align：text-top/text-bottom

文本陰影：text-shadow:水平偏移，垂直偏移 顏色

字體

字體類型:font-family:”sans-serif”;

字體樣式:font-style:normal ;

字體大小:font-size:20px/3.75em/100%;默認大小為16px,字體為宋體

字體加粗:font-weight:normal;

字體的轉變:font-variant:normal/smallcaps;

CSS鏈接

鏈接的四種狀態

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

【注意】當為鏈接的不同狀態設置樣式時，請按照以下次序規則：

a:hover 必須位于 a:link 和 a:visited 之后

a:active 必須位于 a:hover 之后

去掉a鏈接默認的下劃線

text-decoration:{none/underline}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

創建鏈接塊

display:block;

列表樣式

在一個無序列表中，列表項的標志 (marker) 是出現在各列表項旁邊的圓點。在有序列表中，標志可能是字母、數字或另外某種計數體系中的一個符號。

要修改用于列表項的標志類型，可以使用屬性 list-style-type：

ul {list-style-type : square;}

上面的聲明把無序列表中的列表項標志設置為方塊。

列表項圖像

你可能想對各標志使用一個圖像，這可以利用 list-style-image 屬性做到：

ul li {list-style-image : url(xxx.gif);}

列表標志位置

ul{
  list-style-position:inside;
  }

CSS表格

表格邊框

table,th,td{border:1px solid red;}

折疊邊框

border-collapse:collapse;

• 表格的寬度和高度

width,height

• 表格的文字水平對齊

text-align:center/right/left;

• 表格的文字垂直對齊

vertical-align:bottom;

• 表格的內邊距

padding

• 表格的背景顏色

background

盒子模型

margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制塊級元素之間的距離, 它們是透明不可見的。

根據上, 右, 下, 左的順時針規則, 簡寫為

margin: 40px 40px 40px 40px;

為便于記憶, 請參考下圖：

當上下, 左右margin值分別一致, 可簡寫為:

margin: 40px 40px;

前一個40px代表上下margin值, 后一個40px代表左右margin值.

當上下左右margin值均一致, 可簡寫為:

margin: 40px;

padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級元素內部, content與border之間的距離

【注意】當你想讓兩個元素的content在垂直方向(vertically)分隔時, 既可以選擇padding-top/bottom, 也可以選擇margin-top/bottom, 在此建議你盡量使用padding-top/bottom來達到你的目的, 這是因為css中存在Collapsing margins(折疊的margins)的現象.

邊框

• 邊框樣式：border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
• 邊框寬度：border-width
• 邊框顏色：border-color

綜合寫法：

border:1px solid red;

輪廓(outline)

可以按順序設置如下屬性：

• outline-color
• outline-style
• outline-width

CSS所有尺寸

• 寬度

width/min-width/max-width

• 高度

height/min-height/max-height

• 行高

line-height

display顯示類型

隱藏元素—–display:none或者visibility:hiddden

display通常可以設置為none、inline、block

visibility通常可以設置為hidden、visible

二者的區別在于display會將元素隱藏掉，并且位置不再被占據，而visibility則是占據原來的位置。

CSS塊級元素和內聯元素—-display:block/inline/inline-block;

CSS定位(position)

position 屬性值的含義：

static

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute

元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身。

CSS浮動

設置浮動：float:left/right;

清除浮動：clear:both/left/right/null;

浮動的兩個影響因素：1、文檔流 2、顯示類型

元素內容溢出

• 溢出滾動條

overflow:scroll（不管是否溢出都會有滾動條）、auto（自動添加）

• 溢出隱藏

overflow:hidden;

CSS的相關特性

1、繼承性

它不僅允許樣式應用于某個特定的html標簽元素，而且還可引用于其后代；

2、CSS層疊

當有相同權重的樣式存在時，會根據這些CSS樣式的前后順序來決定，處于最后面的CSS樣式會被應用，后面的CSS樣式會覆蓋前面的樣式。

總而言之：內聯樣式表(標簽內部)>嵌入樣式表(當前文件中)>外部樣式表(外部引入文件)