当前位置: 首页 > Web前端 > CSS

xpath&css选择器

时间:2023-03-30 23:02:06 CSS

这篇文章参考了很多,原创的基本没有,总结一下知识就对了。xpath并不复杂,看了简单的使用,及时查阅文档就可以写了。这里是我的练习文件,大家可以参考一下,或者找茬(^__^)嘻嘻...Xpath练习项目XPATH(参考w3school和精米和阮一峰的博客)在XPath中,有七种类型Nodes:elements、属性、文本、命名空间、处理指令、注释和文档节点(或根节点)。节点实际上是各种HTML标签、属性和标签包围的文本。搜索方法xpath使用路径表达式来选择xml文档中的节点。节点按路径或步骤选择。形式上,“路径表达式”与传统文件系统非常相似。斜杠(/)充当路径内的分隔符。同一个节点的写法有两种:绝对路径和相对路径。绝对路径(absolutepath)必须以“/”开头,后面是根节,如/step/step/....相对路径(relativepath)是绝对路径以外的其他*方式,如step/步骤,即不以“/”开头。“。”表示当前节点。“..”表示当前节点的父节点。下面详细介绍一下:pathexpressionresultbookstore选取bookstore元素的所有子节点。/bookstore选择根元素书店。注意:如果路径以正斜杠(/)开头,则路径始终表示元素的绝对路径!bookstore/book选择作为bookstore子元素的所有book元素。//book选择所有book子元素,无论它们在文档中的位置如何。bookstore//book选择作为bookstore元素后代的所有book元素,无论它们位于bookstore下的哪个位置。//@lang选择所有名为lang的属性。谓词用于查找特定节点或包含指定值的节点。谓词括在方括号中。路径表达式结果/bookstore/book[1]选择第一个book元素,它是bookstore的子元素。/bookstore/book[last()]选择作为bookstore子元素的最后一个book元素。/bookstore/book[last()-1]选择作为bookstore子元素的倒数第二个book元素。/bookstore/book[position()<3]选择作为bookstore元素子元素的前两个book元素。//title[@lang]选择所有具有名为lang的属性的标题元素。//title[@lang='eng']选择所有lang属性值为eng的标题元素。/bookstore/book[price>35.00]选取bookstore元素的所有book元素,price元素的值必须大于35.00。/bookstore/book[price>35.00]/title选取bookstore元素中book元素的所有title元素,price元素的值必须大于35.00。XPath通配符可用于选择未知的XML元素。通配符描述*匹配任何元素节点。@*匹配任何属性节点。node()匹配任何类型的节点。在下表中我们列出了一些路径表达式,以及它们的结果:路径表达式结果/bookstore/*选择bookstore元素的所有子元素。//*选择文档中的所有元素。//title[@*]选择所有有属性的title元素。可以使用“|”选择多个路径路径表达式中的运算符。并且选择的路径之间没有关联。互不干扰,各自必是一条完整独立的路径。xpath轴定义相对于当前节点的节点集。axisnameresultancestor选择当前节点的所有祖先(父、祖父母等)。ancestor-or-self选择当前节点的所有祖先(父母、祖父母等)以及当前节点本身。attribute选择当前节点的所有属性。child选择当前节点的所有子元素。descendant选择当前节点的所有后代元素(子元素、孙元素等)。descendant-or-self选择当前节点的所有后代元素(子元素、孙元素等)以及当前节点本身。following选择文档中当前节点结束标记之后的所有节点。namespace选择当前节点的所有命名空间节点。parent选择当前节点的父节点。preceding选择文档中当前节点开始标记之前的所有节点。preceding-sibling选择当前节点之前的所有兄弟节点。self选择当前节点。步骤(step)包括:轴(axis)定义选中节点与当前节点之间的树状关系语法:axisname::nodetest[predicate]instanceexampleresultchild::book选择作为当前节点子节点的所有书籍节点。attribute::lang选择当前节点的lang属性。child::*选择当前节点的所有子元素。attribute::*选择当前节点的所有属性。child::text()选择当前节点的所有文本子节点。child::node()选择当前节点的所有子节点。descendant::book选择当前节点的所有书籍后代。ancestor::book选择当前节点的所有书籍祖先。ancestor-or-self::book选择当前节点和当前节点的所有书籍祖先(如果节点是书籍节点)child::*/child::price选择当前节点的所有价格孙子。以下是可在XPath表达式中使用的运算符列表:运算符说明示例返回值竖条计算两个节点集//book(竖线)//cd返回所有具有book和cd元素的节点集+加法6+410-减法6-42*乘法6*424div除法8div42mod计算除法5的余数mod21=equaltoprice=9.80如果价格为9.80,则返回true。如果价格为9.90,则返回false。!=不等于价格!=9.80如果价格为9.90,则返回真。如果价格为9.80,则返回false。<小于价格<9.80如果价格为9.00,则返回真。如果价格为9.90,则返回false。<=小于或等于价格<=9.80如果价格为9.00,则返回真。如果价格为9.90,则返回false。>大于价格>9.80如果价格为9.90,则返回真。如果价格为9.80,则返回false。>=大于或等于价格>=9.80如果价格为9.90,则返回真。如果价格为9.70,则返回false。ororprice=9.80orprice=9.70如果价格为9.80,则返回true。如果价格为9.50,则返回false。如果价格为9.80,则价格>9.00且价格<9.90返回真。如果价格为8.50,则返回false。这里主要是配合lxml库使用。这里有些例子。#========#文本读取#========fromlxmlimportetreetext='''

    第一项第二项第三项第四项第五项
'''html=etree.HTML(text)result=etree.tostring(html)print(result)#========#读取文件#========fromlxmlimportetreehtml=etree.parse('hello.html')result=etree.tostring(html,pretty_print=True)print(result)#==============#使用xpath分析#==============来自lxmlimportetreehtml=etree.parse('hello.html')result_list=html.xpath('//li')printresult_listCSS选择器(转自阮一峰的博客)最基本的选择器是针对tags、classes和ids的。序号选择器含义1.*通用元素选择器,匹配任意元素2.E标签选择器,匹配所有使用E标签的元素3..infoclass选择器,匹配class属性中包含info的所有元素4.#footerid选择,匹配所有id属性等于footer*{margin:0;的元素填充:0;}p{字体大小:2em;}.info{背景:#ff0;}p.info{背景:#ff0;}p.info.error{颜色:#900;字体粗细:粗体;}#info{背景:#ff0;}p#info{背景:#ff0;}多元素组合选择器(这个比较实用)序号选择设备含义5.E,F多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔6.EF后代元素选择器,匹配所有作为E元素后代的F元素,E和F之间用空格隔开7.E>F子元素选择器,匹配E元素F8的所有子元素。E+F相邻元素选择器,匹配紧跟在E元素之后的所有兄弟元素Fdivp{color:#f00;}#navli{显示:内联;}#nava{字体粗细:粗体;}div>strong{颜色:#f00;}p+p{颜色:#f00;}CSS2.1attributeselectorordinalselector含义9.E[att]匹配所有具有att属性的E元素,不管它的值是多少。(注:此处E可省略,如“[cheacked]”。下同。)10.E[att=val]匹配所有att属性等于"val"的E元素11.E[att~=val]匹配所有att属性有多个空格分隔值的E元素,其中一个等于to"val"元素12.E[att\=val]匹配所有具有多个连字符分隔(hyphen-separated)值的att属性,其中一个以"val"开头的E元素,主要用于lang属性,如"en”、“en-us”、“en-gb”等。p[title]{color:#f00;}div[class=error]{颜色:#f00;}td[headers~=col1]{颜色:#f00;}p[lang|=en]{颜色:#f00;}blockquote[class=quote][cite]{颜色:#f00;}伪类序号选择器在CSS2.1中的含义13.E:first-child匹配父元素的第一个子元素14.E:link匹配所有没有被点击过的链接15.E:visited匹配所有被点击过的链接clicked16.E:active匹配鼠标已经按下还没有释放的E元素17.E:hover匹配鼠标悬停的E元素18.E:focus匹配当前获得焦点的E元素19.E:lang(c)匹配lang属性等于c的E元素p:first-child{font-style:italic;}input[type=text]:focus{颜色:#000;背景:#ffe;}input[type=text]:focus:hover{背景:#fff;}q:lang(sv){引用:"\201D""\201D""\2019""\2019";}伪元素编号选择器在CSS2.1中的含义20.E:first-line匹配E元素的第一行21.E:first-letter匹配E元素的首字母22.E:before插入生成的内容在E元素之前23.E:after在E元素之后插入生成的内容p:first-line{font-weight:bold;颜色;#600;}.preamble:first-letter{font-size:1.5em;字体粗细:粗体;}.cbb:before{内容:"";显示:块;高度:17px;宽度:18px;背景:url(top.png)不重复00;边距:000-18px;}a:link:在{content:"("attr(href)")";}CSS3的同级元素序号选择器的通用选择器含义24.E~F匹配E元素p~ul之后的任意同级F元素{background:#ff0;}CSS3属性选择器序号选择器含义25.E[att^="val"]属性att的值以"val"开头26.E[att$="val"]属性att的值以结尾的元素"val"27.E[att*="val"]属性att的值包含"val"的元素stringdiv[id^="nav"]{background:#ff0;}CSS3与用户界面相关的伪类序号选择器的含义28.E:enabled匹配表单中激活的元素29.E:disabled匹配表单中禁用的元素30.E:checked匹配选中的表单中的radio(单选框)或checkbox(复选框)元素31.E::selection匹配用户当前选中的元素input[type="text"]:disabled{background:#ddd;}CSS3中的结构伪类(比较实用)序号选择器的含义32.E:root匹配文档的根元素。对于HTML文档,就是HTML元素33.E:nth-child(n)匹配其父元素的第n个子元素,第一个数字是134.E:nth-last-child(n)匹配最后的第n个子元素其父元素的元素,第一个数字是135.E:nth-of-type(n)类似于:nth-child(),但只匹配使用相同标签的元素36.E:nth-last-of-type(n)类似于:nth-last-child(),但只匹配使用相同标签的元素37.E:last-child匹配父元素的最后一个子元素,相当于:nth-??last-child(1)38.E:first-of-type匹配父元素下使用相同标签的第一个子元素,等价于:nth-??of-type(1)39.E:last-of-type匹配父元素下最后一个相同标签的子元素,相当于:nth-last-of-type(1)40.E:only-child匹配父元素下唯一的子元素element,相当于:first-child:last-child或:nth-child(1):nth-last-child(1)41.E:only-of-type匹配父元素下的唯一子元素使用相同的标签,相当于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)42.E:empty匹配一个元素不包含任何子元素,注意文本节点也被视为子元素p:nth-child(3){color:#f00;}p:nth-child(奇数){颜色:#f00;}p:nth-child(偶数){颜色:#f00;}p:nth-child(3n+0){颜色:#f00;}p:nth-child(3n){颜色:#f00;}tr:nth-child(2n+11){背景:#ff0;}tr:nth-last-child(2){背景:#ff0;}p:last-child{背景:#ff0;}p:only-child{背景:#ff0;}p:empty{背景:#ff0;}CSS3的反选择伪类序号选择器意思是43.E:not(s)匹配任何不满足当前选择器的元素:not(p){border:1pxsolid#ccc;}在CSS3中:target伪类序号选择器的含义44.E:target匹配点击文档中特定“id”的效果