数据解析-CSS选择器

1、概念

CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

2、定位语法

• 下面以selenium为例，在scrapy框架等支持css选择器的地方仍可以使用。

2.1 定位一个元素

wd = webdriver.Chrome()
wd.find_element(By.CSS_SELECTOR, "CSS选择器定位原则")

2.2 定位多个元素

wd = webdriver.Chrome()
wd.find_elements(By.CSS_SELECTOR, "CSS选择器定位原则")

3、定位元素

3.1 通过属性定位

• id属性

text_id = wd.find_element(By.CSS_SELECTOR, "#db-global-nav")

• class属性

text_class = wd.find_element(By.CSS_SELECTOR, ".top-nav-info")

• 其他属性

text_name = wd.find_element(By.CSS_SELECTOR, "[type='checkbox']")

3.2 通过标签和属性定位

text_ = wd.find_element(By.CSS_SELECTOR, "p[class='appintro-title']")
text__ = wd.find_element(By.CSS_SELECTOR, "div#top-nav-appintro")

3.3 通过层级定位

text_ceng = wd.find_element(By.CSS_SELECTOR, "div.nav-primary >  a")

3.4 通过索引定位

• 父标签[父标签属性名=父标签属性值]>:nth-child(索引值)

# 表示父标签下所有子标签顺序
text_biao1 = wd.find_element(By.CSS_SELECTOR, ".nav-items > ul > :nth-child(2)> a")

• 父标签[父标签属性名=父标签属性值]>子标签:nth-of-type(索引值)

# 表示父标签下具体标签的第几个标签
text_biao2 = wd.find_element(By.CSS_SELECTOR, ".nav-items > ul > li:nth-of-type(2)> a")

3.5 同时匹配多个属性

text_duo = wd.find_element(By.CSS_SELECTOR, "div[id='top-nav-appintro'][class='more-items']")
# text_duo = wd.find_element(By.CSS_SELECTOR, "#top-nav-appintro.more-items")

4、模糊匹配

• 语法：
  • （1）* ：匹配所有；
  • （2）^ ：匹配开头；
  • （3）$ ：匹配结尾。

text_hu1 = wd.find_element(By.CSS_SELECTOR, "span[class^='ve']")
text_hu2 = wd.find_element(By.CSS_SELECTOR, "div[class*='other']")
text_hu3 = wd.find_element(By.CSS_SELECTOR, "span[class$='ble']")

相关代码：https://gitee.com/justinc666/crawler/tree/master/css选择器