CSS Selector
# CSS Selector 选择单个元素
```
find_element_by_css_selector(CSS Selector参数)
```
# 选择所有元素
```
find_elements_by_css_selector(CSS Selector参数)
```
# tag名
所有的tag名为div的元素
```
elements = wd.find_elements_by_css_selector('div')
```
等价于
```
elements = wd.find_elements_by_tag_name('div')
```
# id属性
选择元素的语法是在id号前面加上一个井号： `#id值`
```
<input type="text" id='searchtext' />
```
```
element = wd.find_element_by_css_selector('#searchtext')
```
# class属性
选择元素的语法是在 class 值 前面加上一个点： `.class值`
```
elements = wd.find_elements_by_css_selector('.animal')
```
# 子元素 和 后台元素
`元素2` 是 `元素1` 的 直接子元素：
```
元素1 > 元素2 //中间用一个大于号 （我们可以理解为箭头号）
```
```
元素1 > 元素2 > 元素3 > 元素4 //也支持更多层级的选择
```
`元素2` 是 `元素1` 的 后代元素：
```
元素1 元素2 //中间是一个或者多个空格隔开
```
```
元素1 元素2 元素3 元素4 //也支持更多层级的选择
```
# 根据属性选择
```
<a href="https://www.zlstg.top/">苏ICP备 20013634 号</a>
```
css 选择器支持通过任何属性来选择元素，语法是用一个方括号 `[]` 。
要选择上面的a元素，就可以使用 `[href="https://www.zlstg.top/"]` 。
前面可以加上标签名的限制，比如 `div[class='SKnet']` 表示 选择所有 标签名为div，且class属性值为SKnet的元素。 //属性值用单引号，双引号都可以。
根据属性选择，还可以不指定属性值，比如 `[href]` ， 表示选择 所有 具有 属性名 为href 的元素，不管它们的值是什么。
CSS 还可以选择 属性值 `包含` 某个字符串 的元素
选择a节点，里面的href属性包含了 miitbeian 字符串：
```
a[href*="miitbeian"]
```
选择 属性值 以某个字符串 `开头` 的元素
选择a节点，里面的href属性以 http 开头 ，就可以这样写
```
a[href^="http"]
```
选择 属性值 以某个字符串 `结尾` 的元素
选择a节点，里面的href属性以 gov.cn 结尾 ，就可以这样写
```
a[href$="gov.cn"]
```
一个元素具有多个属性
```
<div class="misc" ctype="gun">沙漠之鹰</div>
```
CSS 选择器 可以指定 选择的元素要 同时具有多个属性的限制
```
div[class=misc][ctype=gun]
```
# 选择预发联合使用
CSS selector 表达式 可以这样写：
```
div.footer1 > span.copyright
```
> 选择 一个class 属性值为 copyright 的 span 节点， 并且要求其 必须是 class 属性值为 footer1 的 div节点 的子节点
也可以更简单：
```
.footer1 > .copyright
```
> 就是 选择 一个class 属性值为copyright 的节点（不限类型）， 并且要求其 必须是 class 属性值为 footer1 的节点的 子节点
更简单：
```
.footer1 .copyright //子元素同时也是后代元素
```
# 组选择
同时选择所有class 为 plant `和` class 为 animal 的元素：
```
.plant , .animal //css选择器可以 使用 逗号 ，称之为 组选择
```
同时选择所有tag名为div的元素 `和` id为BYHY的元素：
```
div,#BYHY
```
```
#对应的selenium代码
elements = wd.find_elements_by_css_selector('div,#BYHY')
for element in elements:
print(element.text)
```
选择所有 id 为 t1 里面的 `span 和 p 元素`：
> 错误示范：#t1 > span,p //这样写的意思是 选择所有 `id 为 t1 里面的 span` 和 `所有的 p 元素`
正确写法：
```
#t1 > span , #t1 > p
```
# 按次序选择子节点
对应的html如下，关键信息如下
```
<body>
<div id='t1'>
<h3> 唐诗 </h3>
<span>李白</span>
<p>静夜思</p>
<span>杜甫</span>
<p>春夜喜雨</p>
</div>
<div id='t2'>
<h3> 宋词 </h3>
<span>苏轼</span>
<p>赤壁怀古</p>
<p>明月几时有</p>
<p>江城子·乙卯正月二十日夜记梦</p>
<p>蝶恋花·春景</p>
<span>辛弃疾</span>
<p>京口北固亭怀古</p>
<p>青玉案·元夕</p>
<p>西江月·夜行黄沙道中</p>
</div>
</body>
```
## 父元素的第n个子节点
指定选择的元素 `是父元素的第几个子节点`
使用 `nth-child`
选择 唐诗 和宋词 的第一个 作者：
```
span:nth-child(2) //第2个子元素，并且是span类型
```
```
:nth-child(2) //不加节点类型限制,选择所有位置为第2个的所有元素
```
## 父元素的倒数第n个子节点
反过来， 选择的是父元素的 `倒数第几个子节点` ，使用 `nth-last-child`：
```
p:nth-last-child(1) //选择第倒数第1个子元素，并且是p元素
```
## 父元素的第几个某类型的子节点
指定选择的元素 是父元素的 `某类型的` 第几个子节点
使用 `nth-of-type`
选择 唐诗 和宋词 的第一个 作者：
```
span:nth-of-type(1) //选择的是 第1个span类型 的子元素
```
## 父元素的倒数第几个某类型的子节点
反过来， 选择父元素的 `倒数第几个某类型` 的子节点
使用 `nth-last-of-type`：
```
p:nth-last-of-type(2)
```
## 奇数节点和偶数节点
选择的是父元素的 `偶数节点`，使用 `nth-child(even)`：
```
p:nth-child(even)
```
选择的是父元素的 `奇数节点`，使用 `nth-child(odd)`：
```
p:nth-child(odd)
```
如果要选择的是父元素的 `某类型偶数节点`，使用 `nth-of-type(even)`
如果要选择的是父元素的 `某类型奇数节点`，使用 `nth-of-type(odd)`
## 兄弟节点选择
### 相邻兄弟节点选择
选择 唐诗 和宋词 的第一个 作者就是选择 h3 `后面紧跟着的兄弟节点` span。
就是一种 相邻兄弟 关系：
```
h3 + span //表示元素 紧跟关系的 是 加号
```
### 后续所有兄弟节点选择
要选择是 选择 h3 `后面所有的兄弟节点` span：
```
h3 ~ span //表示元素 紧跟关系的 是 ~
```
---
🎉
