Xpath与css

（本文摘自w3school中的Xpath：https://www.w3school.com.cn/xpath/index.asp和CSS：https://www.w3school.com.cn/css/index.asp）

Xpath

XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航。
就是XML 元素的路径

XML 是可扩展标记语言（多用来存数据）
HTML 超文本标记语言（多用于展示数据）

Xpath节点：每个XML/HTML的标签我们都称之为节点

在 XPath 中，有七种类型的节点：元素、属性、文本、命名空间、处理指令、注释以及文档节点（或称为根节点）。

XPath 使用路径表达式来选取 XML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。

表达式

表达式	描述
元素名	选取此元素的所有子节点。
/元素	选取根元素（以/开头 是绝对路径）
父元素/子元素	选取父元素下的所有名为这个的子元素
//子元素	选取所有（同名）子元素，无论他在什么位置
父元素//子元素	选取所有（同名）父元素下的（同名子元素）
.	选取当前节点。
…	选取当前节点的父节点。
@	选取属性。
//@元素	选取所有同名属性

谓语

选取未知节点

选取若干路径

CSS （层叠样式表）

CSS 是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素。

css选择器

CSS 选择器
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

通过类名、id、标签名定位

选择器	例子	例子描述
.class	.intro	选取所有 class=“intro” 的元素。
#id	#firstname	选取 id=“firstname” 的那个元素。
*	*	选取所有元素。
element	p	选取所有 元素。

通过元素之间嵌套关系

选择器	示例	示例描述
element,element	div,p	选择所有 元素和所有 元素。
element element	div p	选择所有 元素内的所有 元素。
element>element	div > p	选择其父元素是 元素的所有 元素。

通过属性

选择器	例子	例子描述
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute^=value]	a[href^=“https”]	选择其 href 属性值以 “https” 开头的每个 元素。
[attribute$=value]	a[href$=".pdf"]	选择其 href 属性值以 “.pdf” 结尾的每个 元素。
[attribute*=value]	a[href*=“w3school”]	选择其 href 属性值包含子串 “w3school” 的每个 元素。

通过父子关系

选择器	例子	例子描述
:only-child	p:only-child	选择作为其父的唯一子元素的 元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个 元素，从最后一个子元素计数。