笔记 ：模拟网页操作之定位元素CSS，建议收藏模仿学习

 CSS Selector 是一种模式匹配语法，可以通过元素的属性、类名、ID 等来定位元素。以下是一些常用的 CSS Selector 定位示例：

1、通过 ID 定位：

使用 # 符号后跟元素的 ID 来定位。 示例：#username，表示定位 ID 属性为 "username" 的元素。

2、通过 Class 定位：

使用 . 符号后跟元素的 class 名称来定位。 示例：.submit-button，表示定位 class 属性为 "submit-button" 的元素。

3、通过标签名定位：

直接使用元素的标签名来定位。 示例：input，表示定位所有 <input> 元素。

4、通过属性定位：

使用方括号 [attr=value] 来定位具有指定属性和属性值的元素。 示例：input[type="text"]，表示定位所有 type 属性为 "text" 的 <input> 元素。

5、通过层级关系定位：

使用空格来表示层级关系，例如 div span 表示定位 <div> 元素下的所有 <span> 元素。 示例：div.form-group input，表示定位 <div> 元素中具有 class 为 "form-group" 的元素下的所有 <input> 元素。

6、通过组合定位：

使用 , 来组合多个 CSS Selector，表示匹配其中任何一个选择器。 示例：input[type="text"], input[type="password"]，表示定位所有 type 属性为 "text" 或 "password" 的 <input> 元素。

表格：

以下为部分示例：

<h2 data-v-042af283="" class="fl">济南市</h2>

h2[class='fl']

<div data-v-042af283="" class="clearfix checkLocalAdviceListHead"><h2 data-v-042af283="" class="fl">济南市</h2></div>

div h2[class='fl']

 <li data-v-042af283="">

    <div data-v-042af283="" class="clearfix checkLocalAdviceListHead">

        <h2 data-v-042af283="" class="fl">济南市</h2></div><p data-v-042af283="" class="leaderNameInfo"></p><!---->

    <div data-v-042af283="" class="leaveMessNum">

            <span data-v-042af283="">年度总留言：<span data-v-042af283="" class="active">2002</span>条</span>

   <div data-v-042af283="" class="split"></div>

              <span data-v-042af283="">年度总回复：<span data-v-042af283="" class="active">1746</span>条</span><!----></div></li>

li div h2[class='fl']

li span:nth-child(1) > .active

li span:nth-child(3) > .active

 

<li id="advice5000"><h1>外交部</h1><h2>外交部部长</h2><div style="margin-right: 156px; display: flex; justify-content: left; align-items: center; padding-top: 15px; height: 45px;"><p class="leaderNameInfo" style="margin-top: 0px; margin-right: 10px;">王毅</p><!----></div><div class="checkAdviceListBtn"><button type="button" class="el-button el-button--danger el-button--mini is-plain"><!----><!----><span>查看留言</span></button><button type="button" class="el-button el-button--danger el-button--mini"><!----><!----><span>我要留言</span></button></div></li> 

li h1
li h2
li p[class="leaderNameInfo"]  或 li p.leaderNameInfo

百度示例：

# 通过id定位，id名前加# 
find_element_by_css_selector("#kw")

# 通过class定位，class名前加. 
find_element_by_css_selector(".s_ipt")

# 通过标签定位
find_element_by_css_selector("input")

# 通过其它属性定位 
find_element_by_css_selector("[name='wd']")

# 标签和属性组合定位 
find_element_by_css_selector("input#kw")
find_element_by_css_selector("input.s_ipt")
find_element_by_css_selector("input[name='wd']")
find_element_by_css_selector("[name='wd'][autocomplete='off']")

# 通过父级定位子级元素 
find_element_by_css_selector("from#form>span[@class='bg s_ipt_wr']>input")

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class elementLocalization {

	public static void main(String[] args) {
		
		String chromePath=System.getProperty("user.dir")
				+"\\driver\\chromedriver.exe";
		System.setProperty("webdriver.chrome.driver", chromePath);
		WebDriver driver=new ChromeDriver();
		driver.manage().window().maximize();
		driver.get("https://www.baidu.com");
		try {
			WebElement element=null;   //定义一个Web对象对象
	//		element=driver.findElement(By.cssSelector(".s_ipt"));//CSS样式名称定位百度搜索输入框		
			element=driver.findElement(By.cssSelector("#kw"));//CSSID定位百度搜索输入框		
			element=driver.findElement(By.cssSelector("div,a"));//CSS定位所有div对象和a对象
			element=driver.findElement(By.cssSelector("div a"));//CSS定位div标签内所有的a对象		
			element=driver.findElement(By.cssSelector("div>a"));//CSS定位父对象是div的所有a对象
			element=driver.findElement(By.cssSelector("div+a"));//CSS定位紧接在<div> 对象之后的所有<a> 对象		
		    element=driver.findElement(By.cssSelector("[target='_blank']"));//选择target="_blank" 的所有对象。					
		    element=driver.findElement(By.cssSelector("a[name='tj_trnews'][class='mnav']"));//定位A标签中name='tj_trnews'并且class='mnav'的对象				
	    	element=driver.findElement(By.cssSelector("a[href^='http']"));//选择a标签对象中href 属性值以"http" 开头的每个<a> 对象。					
		    element=driver.findElement(By.cssSelector("a[href$='.com']"));//选择a标签对象中href属性值以".com"结尾的对象						
		    element=driver.findElement(By.cssSelector("a[href*='news']"));//选择a标签对象中href属性值中包含news的对象		
			element=driver.findElement(By.cssSelector("a:nth-last-child(2)"));//选择属于其父对象的首个<a> 对象的每个<a> 对象。
            element=driver.findElement(By.cssSelector("html body div#wrapper div#head div.head_wrapper div.s_form div.s_form_wrapper.soutu-env-nomac.soutu-env-index form#form.fm span.bg.s_ipt_wr.quickdelete-wrap input#kw.s_ipt"));//通过css绝对路径定位
		} catch (Exception e) {
		    System.out.println("定位失败");
		}
	}
}