CSS选择器的用法:组选择，次序选择，相邻节点选择

介绍引入：

使用CSS选择器选择元素时，是具有很强的灵活性的。比如，要选择界面中的一个元素，既可以使用它的某个唯一的属性值，也可以根据父子关系按照层级定位它。CSS选择器除了具有灵活性外，另一个强大之处在于：选择语法可以联合使用。使用CSS选择器选择元素时，是具有很强的灵活性的。比如，要选择界面中的一个元素，既可以使用它的某个唯一的属性值，也可以根据父子关系按照层级定位它。CSS选择器除了具有灵活性外，另一个强大之处在于：选择语法可以联合使用。

第三方库引入：

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()

一：组选择：

• 同时选择多个元素，各个选择条件用逗号（,）隔开，允许逗号两端的属性不一致如果要同时选择所有class名 为 plant 和  animal 的元素，则应写为：

• find_element(By.CSS_SELECTOR, '.pant, .animal')

  注意：通过组选择能够完成同时选择多个元素的工作，其选中元素不是按照组表达式的次序排序的，而是先选择出符合这些表达式的元素，然后按照它们在HTML文档中的出现的次序排列。

• 任务一：

• 1：在浏览器中打开百度新闻https://news.baidu.com/网站，选择“热点要闻”栏目中的class名 为 focuslistnews 和 hotnews的元素，计算满足此条件的元素共有多少项，输出：“热点要闻栏目中有XX项焦点列表和热点新闻项”。使用qiut()关闭浏览器。
• 代码如下：

• driver.get("https://news.baidu.com/")
  focuslistnews_items = driver.find_elements(By.CSS_SELECTOR,'.focuslistnews , .hotnews')
  # 计算满足条件的元素数量
  total_items = len(focuslistnews_items)
  # 输出计算结果
  print(f"热点要闻栏目中有{total_items}项焦点列表和热点新闻项")

  二：次序选择

• 指定选择的元素是父元素的第几个子节点，语法为 :nth-child()，括号中填写第几个子节点的数字。

• 例如：要选择唐诗和宋词的第一个作者，也就是选择第2个子元素，且为span类型，CSS Selector表达式可写为：

  span:nth-child(2)
  #或  t1  :nth-child(2) , #t2  :nth-child(2)
  #又或者  t1 > :nth-child(2) , #t2 > :nth-child(2)

  指定选择的元素 是父元素的倒数第几个子节点，语法为 :nth-last-child()，括号中填写第几个子节点的数字。

  例如：要选择最后一首唐诗和宋词的题目，CSS Selector表达式可写为：

  p:nth-last-child(1)

  指定选择的元素是父元素第几个某类型的子节点，语法为 :nth-of-type()，括号中填写第几个子节点的数字。

  例如：要使用类型限定选择唐诗和宋词的第一个作者，由于它们是父元素下第一个span类型的子元素，所以CSS Selector表达式可写为：

   span:nth-of-type(1)

  指定选择的元素是父元素倒数第几个某类型的子节点，语法为 :nth-last-of-type()，括号中填写第几个子节点的数字。

  例如：要选择唐诗和宋词的倒数第一个作者，CSS Selector表达式可写为：

  span:nth-last-of-type(1)

  指定选择的元素是父元素的奇数或偶数的子节点，语法为 :

  nth-child(odd) 及 :nth-child(even)

  例如：#t1  :nth-child(odd)

  指定选择的元素 是父元素某种类型的奇数或偶数的子节点，语法为 :

  nth-of-type(odd) 及 :nth-of-type(even)

  例如：#t2  p:nth-of-type(even)

• 任务二：

• 在上个操作步骤的关闭浏览器之前，添加：按照次序选择子节点的任意两种不同的方式，完成对“热点要闻”栏目中的class名为hotnews的元素中的第四个新闻标题的获取，并输出显示文本信息。
• 代码如下：

• #1. 父元素的第几个子节点
  hotnews_items = driver.find_element(By.CSS_SELECTOR, '.hotnews')
  title4_text = hotnews_items.find_element(By.CSS_SELECTOR, "ul>li:nth-child(4)").text
  # 输出第四个标题的文本信息
  print(f"热点要闻中第四个新闻标题为：{title4_text}")
  
  #2.父元素第几个某类型的子节点
  hotnews_items = driver.find_element(By.CSS_SELECTOR, '.hotnews')
  title4_text = hotnews_items.find_element(By.CSS_SELECTOR, "ul > li:nth-of-type(4)").text
  # 输出第四个标题的文本信息
  print(f"热点要闻中第四个新闻标题为：{title4_text}")
  
  #3.通过子元素类型，父元素获取子元素的方法
  hotnews_items = driver.find_elements(By.CSS_SELECTOR, '.hotnews')
  hotnews_element = hotnews_items[0]
  hotnews_titles = hotnews_element.find_elements(By.TAG_NAME, "li")
  title4_text = hotnews_titles[3].text
  # 输出第四个标题的文本信息
  print(f"热点要闻中第四个新闻标题为：{title4_text}")
  
  #4.通过索引获取子元素的方法
  hotnews_element = hotnews_items[0]
  title4_text = hotnews_element.find_element(By.XPATH, "./ul/li[4]").text
  # 输出第四个标题的文本信息
  print(f"热点要闻中第四个新闻标题为：{title4_text}")

  三：兄弟节点选择

• 相邻兄弟节点选择，就是选择一个元素平级的后面紧跟着的兄弟节点，相邻关系语法用加号+表示。

• 

  例如：要选择唐诗和宋词的第一个作者，因为唐诗和宋词的标签名都是h3，紧跟着它的平级兄弟节点span就是作者，所以CSS Selector表达式可以写为：h3 + span

  也就是选择紧跟 <h3> 元素的首个 <span> 元素

  后续所有兄弟节点选择，用波浪线~表示。

   

  例如：要选择唐诗和宋词的所有作者，CSS Selector表达式可以写为：h3 ~ span

• 任务三：

• 在上个操作步骤的关闭浏览器之前，添加：按照兄弟节点选择方式，完成对“热点要闻”栏目中的class名为hotnews的元素的相邻兄弟节点的选择，并输出此兄弟节点的全部可见文本。
• 代码如下：

• 
  # 查找热点要闻元素的相邻兄弟元素
  
  # 使用CSS选择器（元素+元素）
  sibling_element = driver.find_element(By.CSS_SELECTOR, '.hotnews+ul')
  #输出相邻的兄弟元素的全部可见文本
  print(sibling_element.text)
  
  # 使用XPATH
  hotnews_element = driver.find_element(By.CSS_SELECTOR, '.hotnews')
  sibling_element = hotnews_element.find_element(By.XPATH, "./following-sibling::*[1]")
  # 输出相邻兄弟元素的全部可见文本
  print(f"热点要闻元素的相邻兄弟元素的全部可见文本为：{sibling_element.text}")

  总的代码如下：

• 
  from selenium import webdriver
  from selenium.webdriver.common.by import By
  
  driver = webdriver.Chrome()
  # 练习一
  driver.get("https://news.baidu.com/")
  focuslistnews_items = driver.find_elements(By.CSS_SELECTOR,'.focuslistnews , .hotnews')
  # 计算满足条件的元素数量
  total_items = len(focuslistnews_items)
  # 输出计算结果
  print(f"热点要闻栏目中有{total_items}项焦点列表和热点新闻项")
  
  
  print("###################################")
  
  
  # 练习二
  #1. 父元素的第几个子节点
  hotnews_items = driver.find_element(By.CSS_SELECTOR, '.hotnews')
  title4_text = hotnews_items.find_element(By.CSS_SELECTOR, "ul>li:nth-child(4)").text
  # 输出第四个标题的文本信息
  print(f"热点要闻中第四个新闻标题为：{title4_text}")
  
  #2.父元素第几个某类型的子节点
  hotnews_items = driver.find_element(By.CSS_SELECTOR, '.hotnews')
  title4_text = hotnews_items.find_element(By.CSS_SELECTOR, "ul > li:nth-of-type(4)").text
  # 输出第四个标题的文本信息
  print(f"热点要闻中第四个新闻标题为：{title4_text}")
  
  #3.通过子元素类型，父元素获取子元素的方法
  hotnews_items = driver.find_elements(By.CSS_SELECTOR, '.hotnews')
  hotnews_element = hotnews_items[0]
  hotnews_titles = hotnews_element.find_elements(By.TAG_NAME, "li")
  title4_text = hotnews_titles[3].text
  # 输出第四个标题的文本信息
  print(f"热点要闻中第四个新闻标题为：{title4_text}")
  
  #4.通过索引获取子元素的方法
  hotnews_element = hotnews_items[0]
  title4_text = hotnews_element.find_element(By.XPATH, "./ul/li[4]").text
  # 输出第四个标题的文本信息
  print(f"热点要闻中第四个新闻标题为：{title4_text}")
  
  print("###################################")
  
  # 练习三
  # 查找热点要闻元素的相邻兄弟元素
  
  # 使用CSS选择器（元素+元素）
  sibling_element = driver.find_element(By.CSS_SELECTOR, '.hotnews+ul')
  # 输出相邻的兄弟元素的全部可见文本
  print(sibling_element.text)
  
  # 使用XPATH
  # hotnews_element = driver.find_element(By.CSS_SELECTOR, '.hotnews')
  # sibling_element = hotnews_element.find_element(By.XPATH, "./following-sibling::*[1]")
  # 输出相邻兄弟元素的全部可见文本
  # print(f"热点要闻元素的相邻兄弟元素的全部可见文本为：{sibling_element.text}")
  
  
  # 关闭浏览器
  driver.quit()