<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>

<dd id="ycqsw"><menu id="ycqsw"></menu></dd>

<nav id="ycqsw"></nav>

<menu id="ycqsw"><strong id="ycqsw"></strong></menu>

<xmp id="ycqsw"><nav id="ycqsw"></nav>

css選擇器第一個子元素的用法（css中常用的偽類選擇器）

長城號SEO專員 ? 2021年8月10日 10:38:29 ? 投稿

了解過前端知識的人，應該對css熟悉。它是用于給html頁面添加樣式和布局的，css的定位包括class,ID選擇器，元素屬性選擇器和偽類等。其實selenium的css定位跟頁面的css語法非常的像，有點異卵雙胞胎的意思，為啥不是同卵雙胞胎呢？因為它們之間還是有點區別的?，F在我們來具體學習下。

1.通過屬性定位元素

CSS選擇器可以通過元素的id、class、tag標簽這三個常規屬性直接定位到目標元素

例如：

<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">


'''
1.學習目標:
    必須掌握selenium中css定位方法
2.語法
    2.1 在selenium中語法
      (1)driver.find_element_by_css_selector("css選擇器定位策略")
      (2)driver.find_elements_by_css_selector("css選擇器定位策略")
    2.2 css表達式寫法
      (1)#表示id屬性
        #id屬性值  例如: #telA
      (2).表示class屬性
        .class屬性值  例如: .telA
      (3)其他屬性
        [屬性名=屬性值] 例如: [name=telA]

3.需求
    在頁面中,使用css定位電話A輸入框
'''
# 1.導入selenium
from selenium import webdriver
from time import sleep
import os
# 2.打開瀏覽器
driver = webdriver.Chrome()
# 3.打開頁面
url = "file:///" + os.path.abspath("./練習頁面/注冊A.html")
driver.get(url)
# 4.定位電話A標簽,使用css selector
# 4.1 通過id定位
telA_1 = driver.find_element_by_css_selector("#telA")
print(telA_1.get_attribute("outerHTML"))
# 4.2 通過class屬性定位
telA_2 = driver.find_element_by_css_selector(".telA")
print(telA_2.get_attribute("outerHTML"))
# 4.3 通過其他屬性定位
telA_3 = driver.find_element_by_css_selector("[name='telA']")
print(telA_3.get_attribute("outerHTML"))
# 5.關閉瀏覽器
sleep(2)
driver.quit()
'''
輸出結果：
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
'''

2.通過標簽定位元素

例如：

<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">

'''
1.學習目標:
    必須掌握selenium中css定位方法
2.語法
    2.1 在selenium中語法
      (1)driver.find_element_by_css_selector("css選擇器定位策略")
      (2)driver.find_elements_by_css_selector("css選擇器定位策略")
    2.2 css表達式寫法
        標簽+屬性
        格式：標簽名[屬性名=屬性值]
3.需求
    在頁面中,使用css定位電話A輸入框
'''
# 1.導入selenium
from selenium import webdriver
from time import sleep
import os
# 2.打開瀏覽器
driver = webdriver.Chrome()
# 3.打開頁面
url = "file:///" + os.path.abspath("./練習頁面/注冊A.html")
driver.get(url)
# 4.定位電話A標簽,使用css selector
# 標簽+屬性
# 通過name屬性
telA = driver.find_element_by_css_selector("input[name='telA']")
# 通過id屬性
telA_1 = driver.find_element_by_css_selector("input#telA")
print(telA.get_attribute("outerHTML"))
print(telA_1.get_attribute("outerHTML"))
# 5.關閉瀏覽器
sleep(2)
driver.quit()
'''
輸出結果：
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
'''

3.通過層級關系定位元素

例如：

<p id="p1">    
  			<label for="userA">賬號A</label>
  		  <input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">	</p>

'''
1.學習目標:
    必須掌握selenium中css定位方法
2.語法
    2.1 在selenium中語法
      (1)driver.find_element_by_css_selector("css選擇器定位策略")
      (2)driver.find_elements_by_css_selector("css選擇器定位策略")
    2.2 css表達式寫法
        層級定位  需要使用 > 或 空格表示層級關系
        格式：父標簽名[父標簽屬性名=屬性值]>子標簽名
3.需求
    在頁面中,使用css定位賬號A輸入框
'''
# 1.導入selenium
from selenium import webdriver
from time import sleep
import os
# 2.打開瀏覽器
driver = webdriver.Chrome()
# 3.打開頁面
url = "file:///" + os.path.abspath("./練習頁面/注冊A.html")
driver.get(url)
# 4.定位賬號A標簽,使用css selector層級定位
textA_1 = driver.find_element_by_css_selector("p#p1 input")
print(textA_1.get_attribute("outerHTML"))
# 5.關閉瀏覽器
sleep(2)
driver.quit()
'''
輸出結果：
<input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
'''

4.通過索引定位元素

例如：

<div id="zc">    
  		 <fieldset>
    	 <legend>注冊用戶A</legend>
        			<p id="p1">
            				 <label for="userA">賬號A</label>
            				 <input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
        			</p>
        			<p>
            				 <label for="password">密碼A</label>
            					<input type="password" name="passwordA" id="passwordA" placeholder="密碼A" value="">
        			</p>
     		</fieldset>
</div>

'''
1.學習目標:
    必須掌握selenium中css定位方法
2.語法
    2.1 在selenium中語法
      (1)driver.find_element_by_css_selector("css選擇器定位策略")
      (2)driver.find_elements_by_css_selector("css選擇器定位策略")
    2.2 css表達式寫法
        索引定位
        （1）父標簽名[父標簽屬性名=屬性值]>:nth-child(索引值)
            從父標簽下所有標簽開始計算
        （2）父標簽名[父標簽屬性名=屬性值]>子標簽名:nth-of-type(索引值)  
            表示父標簽下具體標簽的第幾個標簽
3.需求
    在頁面中,使用css定位賬號A輸入框
'''
# 1.導入selenium
from selenium import webdriver
from time import sleep
import os
# 2.打開瀏覽器
driver = webdriver.Chrome()
# 3.打開注冊A頁面
url = "file:///" + os.path.abspath("./練習頁面/注冊A.html")
driver.get(url)
# 4. 使用css索引定位賬號A輸入框
textA_1 = driver.find_element_by_css_selector("fieldset>:nth-child(2)>input")
textA_2 = driver.find_element_by_css_selector("fieldset>p:nth-of-type(1)>input")
print(textA_1.get_attribute("outerHTML"))
print(textA_2.get_attribute("outerHTML"))
# 5.關閉瀏覽器
sleep(2)
driver.quit()
'''
輸出結果：
<input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
<input type="textA" name="userA" id="userA" placeholder="賬號A" required="" value="">
'''

5.通過邏輯運算定位元素

CSS選擇器同樣也可以實現邏輯運算，同時匹配兩個屬性，這里跟XPath不一樣，無需寫and關鍵字

例如：

<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">

'''
1.學習目標:
    必須掌握selenium中css定位方法
2.語法
    2.1 在selenium中語法
      (1)driver.find_element_by_css_selector("css選擇器定位策略")
      (2)driver.find_elements_by_css_selector("css選擇器定位策略")
    2.2 css表達式寫法
        邏輯定位
        格式：標簽名[屬性名1=屬性值1][屬性名2=屬性值2]...
        注意:屬性與屬性之間不能用空格
3.需求
    在頁面中,使用css定位電話A輸入框
'''
# 1.導入selenium
from selenium import webdriver
from time import sleep
import os
# 2.打開瀏覽器
driver = webdriver.Chrome()
# 3.打開注冊A頁面
url = "file:///" + os.path.abspath("./練習頁面/注冊A.html")
driver.get(url)
# 4. 使用css邏輯定位---電話A輸入框
# 注意：兩個屬性之間不能加空格，空格表示層級關系
telA = driver.find_element_by_css_selector("input[type='telA'][placeholder='電話A']")
print(telA.get_attribute("outerHTML"))
# 5.關閉瀏覽器
sleep(2)
driver.quit()
'''
輸出結果：
<input type="telA" name="telA" id="telA" placeholder="電話A" class="telA" value="">
'''

6.通過模糊匹配定位元素

css_selector有三種模糊匹配方式

匹配到id屬性值的頭部，如ctrl_12

driver.find_element_by_css_selector("input[id^='ctrl']")

匹配到id屬性值的尾部，如a_ctrl

driver.find_element_by_css_selector("input[id$='ctrl']")

匹配到id屬性值的中間，如1_ctrl_12

driver.find_element_by_css_selector("input[id*='ctrl']")

'''
1.學習目標:
    必須掌握selenium中css定位方法
2.語法
    2.1 在selenium中語法
      (1)driver.find_element_by_css_selector("css選擇器定位策略")
      (2)driver.find_elements_by_css_selector("css選擇器定位策略")
    2.2 css表達式寫法
        模糊匹配：匹配屬性值
        （1）* ：匹配所有
        （2）^ ：匹配開頭
        （3）$ ：匹配結尾
3.需求
    在頁面中,使用css定位注冊用戶A按鈕
'''
# 1.導入selenium
from selenium import webdriver
from time import sleep
import os
# 2.打開瀏覽器
driver = webdriver.Chrome()
# 3.打開注冊A頁面
url = "file:///" + os.path.abspath("./練習頁面/注冊A.html")
driver.get(url)
# 4. 使用css模糊匹配定位---注冊用戶A按鈕
button_1 = driver.find_element_by_css_selector("button[type^='su']")
print(button_1.get_attribute("outerHTML"))
button_2 = driver.find_element_by_css_selector("button[value$='冊A']")
print(button_2.get_attribute("outerHTML"))
button_3 = driver.find_element_by_css_selector("button[title*='入會']")
print(button_3.get_attribute("outerHTML"))
# 5.關閉瀏覽器
sleep(2)
driver.quit()
'''
輸出結果：
<button type="submitA" value="注冊A" title="加入會員A">注冊用戶A</button>
<button type="submitA" value="注冊A" title="加入會員A">注冊用戶A</button>
<button type="submitA" value="注冊A" title="加入會員A">注冊用戶A</button>
'''

點擊展開全文

贊 (0)

長城號SEO專員管理員

css怎么用，divcss布局經典實例

雖然CSS簡單，但CSS是一門非常有意思的語言，CSS每年都有變化，而且都有不同的博主都在不同的時間段總結一些CSS的新特性。雖然這些新特性無法立刻得到眾多瀏覽器的支持，但總是隨著…
劉英
2020年2月29日 ? 投稿
投稿
網頁設計css是什么意思（解析有關CSS代碼所有知識）
CSS代碼長什么樣？ CSS的代碼是類似 json 數據的鍵值對，也就是key : value，當然，每一句都必須以分號（；）結束，切記，沒有分號會出問題的。其實類似 json …
長城號SEO專員
2021年6月24日
簡述什么是css以及css的作用（詳解css概念和作用）

聊起css，印象最深刻的就是剛畢業那會剛開始從事前端開發崗位工作的時候，身為一名 cut picture boy(切圖仔)，在頁面布局及還原設計圖中廣泛使用css來開發頁面，我記得…
長城號SEO專員
2021年6月24日 ? 投稿
什么是css樣式及作用（css特效樣式知識解析）

上幾節我們把HTML相關的必要知識點給大家已經講完，剩下的細節大家可以查閱資料再進行深入研究。從這一節開始，我們正式進入CSS的學習，在學習之前我們先介紹幾個概念。第一，什么是C…
長城號SEO專員
2021年7月1日 ? 投稿
投稿
css新特性有哪些（詳細介紹css的9大新特性）
1、透明度 rgba和opacity都可以設置透明的。 rgba(red, green, blue, alpha)：alpha是0-1透明度，0時顏色為完全透明，1是完全不透明。 …
長城號SEO專員
2021年7月24日
超出顯示省略號兼容寫法（css文字溢出變省略號）

說說css最常見的知識，實現單行、雙行文本溢出顯示省略號！如果實現單行文本的溢出顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來，當然還需要加寬度wi…
長城號SEO專員
2021年8月6日 ? 投稿

版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容，請發送郵件至舉報，一經查實，本站將立刻刪除。

發表評論

登錄后才能評論

国产精品区一区二区免费