如何设置CSS选择器?WP-AutoPost使用说明

开始吧 实用技巧评论1,4343阅读模式

wordpress下采集神器应该算是WP-AutoPost了,要使用WP-AutoPost设置采集规则,只需要掌握基本的CSS选择器知识即可。

基础选择器

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

class选择器前面有 . 号,  .some_word
文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

id选择器使前面有 # 号, #some_word文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

例如某篇文章的标题HTML代码如下:文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

如何设置CSS选择器?WP-AutoPost使用说明文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

因此该文章标题的CSS选择器就是  .entry-title文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

如果是:文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

如何设置CSS选择器?WP-AutoPost使用说明文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

该文章标题的CSS选择器就是  #artibodyTitle文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

例如某篇文章的正文内容HTML代码如下:文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

如何设置CSS选择器?WP-AutoPost使用说明文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

该文章内容的CSS选择器就是  .entry文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

后代元素选择器

选择器示例 含义
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元素内部 

后代元素选择器,每个元素之间用空格隔开文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

例如要设置文章来源选项卡里的文章网址CSS选择器,文章列表网址里每篇文章超链接HTML代码如下:文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

如何设置CSS选择器?WP-AutoPost使用说明文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

因为每篇文章的网址(a 标签)都在class=“contList”的元素内部,所以该文章网址CSS选择器可以设置为  .contList  a文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

在上面例子中因为<a>标签也在<li>标签内部,因此也可以设置为 .contList  li  a文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

同理<li>标签又在<ul>标签内部,因此也可以设置为 .contList  ul  li  a文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

以上3个设置都是等价的。文章源自开始吧-https://www.ks8.com.cn/how-css-choose/ 文章源自开始吧-https://www.ks8.com.cn/how-css-choose/

继续阅读
评论  0  访客  0
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定