WordPress自动采集发布插件WP-AutoPost 使用文档

19,383次阅读
没有评论

如何设置 CSS 选择器

要使用 WP-AutoPost 设置采集规则,只需要掌握基本的 CSS 选择器知识即可。

如需学习更多可以参考http://www.w3schools.com/cssref/css_selectors.asp

基础选择器

选择器示例 含义
h1 标签选择器,匹配所有使用 <h1> 标签的元素
a 标签选择器,匹配所有使用 <a> 标签的元素
.info class 选择器,匹配所有 class 属性等于 info 的元素
#info id 选择器,匹配所有 id 属性等于 footer 的元素

class 选择器前面有 号,  .some_word

id 选择器使前面有 # 号, 如 #some_word

例如某篇文章的标题 HTML 代码如下:

WordPress 自动采集发布插件 WP-AutoPost 使用文档

因此该文章标题的 CSS 选择器就是  .entry-title

如果是:

WordPress 自动采集发布插件 WP-AutoPost 使用文档

该文章标题的 CSS 选择器就是  #artibodyTitle

例如某篇文章的正文内容 HTML 代码如下:

WordPress 自动采集发布插件 WP-AutoPost 使用文档

该文章内容的 CSS 选择器就是  .entry

后代元素选择器

选择器示例 含义
div  p 匹配所有在 <div> 元素内部的 <p> 标签元素
div  li  a 匹配所有在 <li> 元素内部的 <a> 标签元素,并且 <li> 元素又在 <div> 元素内部
.contList  a 匹配所有在 class 属性等于 contList 元素内部 的 <a> 标签元素
#contList  a 匹配所有在 id 属性等于 contList 元素内部 的 <a> 标签元素
#contList  li  a 匹配所有在 <li> 元素内部的 <a> 标签元素,并且 <li> 元素又在 id 属性等于 contList 元素内部 

后代元素选择器,每个元素之间用空格隔开

例如要设置文章来源选项卡里的 文章网址 CSS 选择器,文章列表网址里每篇文章超链接 HTML 代码如下:

WordPress 自动采集发布插件 WP-AutoPost 使用文档

因为每篇文章的网址 (a 标签) 都在 class=“contList”的元素内部,所以该 文章网址 CSS 选择器 可以设置为  .contList  a

在上面例子中因为 <a> 标签也在 <li> 标签内部,因此也可以设置为 .contList  li  a

同理 <li> 标签又在 <ul> 标签内部,因此也可以设置为 .contList  ul  li  a

以上 3 个设置都是等价的。

正文完
 0
评论(没有评论)