选择元素的一些方法_css选择器匹配多个元素,如何选择某一个元素-CSDN博客

本文链接：https://blog.csdn.net/onenian/article/details/136252158

选择元素的一些资料

文章目录

选择元素的一些资料

CSS 选择器

基本选择器

优先级：ID选择器 > 类选择器 > 标签(元素)选择器。

标签(元素)选择器：选择某一个或者某一类元素。
ID选择器：id不能重复，全局唯一。
类选择器：可以跨标签，类相同，可以复用。

选择器	类型	功能表述
*	通配选择器	选择文档中所有HTML元素
E	元素选择器	选择指定类型的元素
#id	ID选择器	选择指定ID属性值为“id”的任意类型元素
.class	类选择器	选择指定class属性值为“class”的任意类型的任意多个元素
selector,selectorN	群组选择器	将每一个选择器匹配的元素集合并

通配符选择器

        * {
            margin: 0;
            padding: 0;
        }

元素选择器

        h1 {
            color: orange;
        }

ID选择器

        #id {
            color: orange;
        }

类选择器

        .class {
            color: orange;
        }

群组选择器

        h1, #class, .id {
            color: orange;
        }

层次选择器

层次选择器通过DOM元素之间的结构(层次关系)来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等。

选择器	类型	功能表述
E F	后代选择器（包含选择器）	选择匹配的F元素，且匹配F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F	通用选择器	选择匹配的F元素，且位于匹配的E元素的所有匹配的F元素

后代选择器

        <!-- 后代选择器 选择的是ul所包围的所有元素  -->
        ul li {
            color: red;
        }

子代选择器

        <!--  子选择器 选择的是ul的亲儿子(li)  -->
        ul>li {
            color: red;
        }

相邻兄弟选择器

        <!--相邻兄弟选择器 选择的是ul的下一个同级元素li-->
        ul + li {
            color: red;
        }

通用选择器

        <!--通用选择器 选择的是ul的后面的所有同级li元素-->
        ul ~ li {
            color: red;
        }

结构伪类选择器

结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child	作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root	选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n)	选择父元素E的第n个子元素F，其中n可以是救数(1，2，3)，关键字(even，odd)、可以是公式(2n+1),而且n值起始值为1，而不是0
E F:nth-last-child(n)	选择父元素F的倒数第n个子元素F，比选择器与E:nth-chid(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中:nth-last-child(1)始终匹配最后一个元素，与last-child等同
E:nth-of-type(n)	选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-type	选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>

</html>

选择ul的第一个子元素

        /* 选择ul的第一个子元素 */
        ul li:first-child {
            background-color: orange;
        }

选择ul的最后一个子元素

        /* 选择ul的最后一个子元素 */
        ul li:last-child {
            background-color: gold;
        }

选中p元素当前的父级元素,选中到父级元素的第一个,并且是p元素才有效

        /* 选中p元素当前的父级元素,选中到父级元素的第一个,并且是p元素才有效 */
        p:nth-child(1) {
            background-color: green;
        }

选中p元素当前的父级元素,选中到父级元素的第一个p元素

        /* 选中p元素当前的父级元素,选中到父级元素的第一个p元素 */
        p:nth-of-type(1) {
            background-color: green;
        }

奇数行偶数行

element:nth-child(odd){

} //奇数行

element:nth-child(even){

} //偶数行

element:nth-child(2n+1){

} //奇数行

element:nth-child(2n){

} //偶数行

属性选择器(重要)

属性选择器可以根据元素的属性及属性值来选择元素

选择器	功能描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	e匹配属性值中包含指定值的每个元素。

选中包含id属性的a元素:

        a[id] {
            background-color: #fff;
        }

选中id为AAA属性的a元素:

        a[id="AAA"] {
            background-color: #fff;
        }

选中href属性可以包含www.baidu的a元素:

        a[href~="www.baidu"] {
            background-color: orange;
        }

选中href属性以world单词开头的a元素，该值必须包含整个world:

        a[href|="world"] {
            background-color: orange;
        }

选中href属性以https开头的a元素:

        a[href^="https"] {
            background-color: orange;
        }

选中href属性以.com结尾的a元素：

        a[href$=".com"] {
            background-color: orange;
        }

选中href属性包含baidu的a元素：

        a[href*="baidu"] {
            background-color: orange;
        }

JQuery 选择器

https://www.runoob.com/jquery/jquery-ref-selectors.html

选择器	实例	选取
*	$(“*”)	所有元素
#id	$(“#lastname”)	id=“lastname” 的元素
.class	$(“.intro”)	class=“intro” 的所有元素
.class,.class	$(“.intro,.demo”)	class 为 “intro” 或 “demo” 的所有元素
element	$(“p”)	所有< p > 元素
el1,el2,el3	$(“h1,div,p”)	所有 < h1>、< div> 和 < p> 元素
:first	$(“p:first”)	第一个 < p> 元素
:last	$(“p:last”)	最后一个 < p> 元素
:even	$(“tr:even”)	所有偶数 < tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:odd	$(“tr:odd”)	所有奇数 < tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:first-child	$(“p:first-child”)	属于其父元素的第一个子元素的所有 < p> 元素
:first-of-type	$(“p:first-of-type”)	属于其父元素的第一个 < p> 元素的所有 < p> 元素
:last-child	$(“p:last-child”)	属于其父元素的最后一个子元素的所有 < p> 元素
:last-of-type	$(“p:last-of-type”)	属于其父元素的最后一个 < p> 元素的所有 < p> 元素
:nth-child(n)	$(“p:nth-child(2)”)	属于其父元素的第二个子元素的所有 < p > 元素
:nth-last-child(n)	$(“p:nth-last-child(2)”)	属于其父元素的第二个子元素的所有 < p> 元素，从最后一个子元素开始计数
:nth-of-type(n)	$(“p:nth-of-type(2)”)	属于其父元素的第二个 < p > 元素的所有 < p > 元素
:nth-last-of-type(n)	$(“p:nth-last-of-type(2)”)	属于其父元素的第二个 < p> 元素的所有 < p> 元素，从最后一个子元素开始计数
:only-child	$(“p:only-child”)	属于其父元素的唯一子元素的所有 < p> 元素
:only-of-type	$(“p:only-of-type”)	属于其父元素的特定类型的唯一子元素的所有 < p> 元素
parent > child	$(“div > p”)	< div> 元素的直接子元素的所有 < p> 元素
parent descendant	$(“div p”)	< div> 元素的后代的所有 < p> 元素
element + next	$(“div + p”)	每个 < div> 元素相邻的下一个 < p> 元素
element ~ siblings	$(“div ~ p”)	< div> 元素同级的所有 < p> 元素
:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 值从 0 开始）
:gt(no)	$(“ul li:gt(3)”)	列举 index 大于 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列举 index 小于 3 的元素
:not(selector)	$(“input:not(:empty)”)	所有不为空的输入元素
:header	$(“:header”)	所有标题元素 < h1>, < h2> …
:animated	$(“:animated”)	所有动画元素
:focus	$(“:focus”)	当前具有焦点的元素
:contains(text)	$(“:contains(‘Hello’)”)	所有包含文本 “Hello” 的元素
:has(selector)	$(“div:has§”)	所有包含有 < p> 元素在其内的 < div> 元素
:empty	$(“:empty”)	所有空元素
:parent	$(“:parent”)	匹配所有含有子元素或者文本的父元素。
:hidden	$(“p:hidden”)	所有隐藏的 < p> 元素
:visible	$(“table:visible”)	所有可见的表格
:root	$(“:root”)	文档的根元素
:lang(language)	$(“p:lang(de)”)	所有 lang 属性值为 “de” 的 < p> 元素
[attribute]	$(“[href]”)	所有带有 href 属性的元素
[attribute=value]	$(“[href=‘default.htm’]”)	所有带有 href 属性且值等于 “default.htm” 的元素
[attribute!=value]	$(“[href!=‘default.htm’]”)	所有带有 href 属性且值不等于 “default.htm” 的元素
[attribute$=value]	$(" [h re f$ =‘.jpg’]")	所有带有 href 属性且值以 “.jpg” 结尾的元素
[attribute	=value]	$("[title
[attribute^=value]	$(“[title^=‘Tom’]”)	所有带有 title 属性且值以 “Tom” 开头的元素
[attribute~=value]	$(“[title~=‘hello’]”)	所有带有 title 属性且值包含单词 “hello” 的元素
[attribute*=value]	$(“[title*=‘hello’]”)	所有带有 title 属性且值包含字符串 “hello” 的元素
[name=value][name2=value2]	$(" in p u t [i d] [nam e$ =‘man’]" )	带有 id 属性，并且 name 属性以 man 结尾的输入框
:input	$(“:input”)	所有 input 元素
:text	$(“:text”)	所有带有 type=“text” 的 input 元素
:password	$(“:password”)	所有带有 type=“password” 的 input 元素
:radio	$(“:radio”)	所有带有 type=“radio” 的 input 元素
:checkbox	$(“:checkbox”)	所有带有 type=“checkbox” 的 input 元素
:submit	$(“:submit”)	所有带有 type=“submit” 的 input 元素
:reset	$(“:reset”)	所有带有 type=“reset” 的 input 元素
:button	$(“:button”)	所有带有 type=“button” 的 input 元素
:image	$(“:image”)	所有带有 type=“image” 的 input 元素
:file	$(“:file”)	所有带有 type=“file” 的 input 元素
:enabled	$(“:enabled”)	所有启用的元素
:disabled	$(“:disabled”)	所有禁用的元素
:selected	$(“:selected”)	所有选定的下拉列表元素
:checked	$(“:checked”)	所有选中的复选框选项
.selector	$(selector).selector	在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器
:target	$( “p:target” )	选择器将选中ID和URI中一个格式化的标识符相匹配的< p>元素

基本选择器

$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器

层次选择器

 $("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器

过滤选择器(重点)

$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素

可见性过滤选择器

$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素

属性过滤选择器

$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

状态过滤选择器

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option

表单选择器

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

JQuery 选择器

基本选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

总结：跟css的选择器用法一模一样。

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

总结：跟css的选择器用法一模一样。

过滤选择器

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素

总结：这类选择器都带冒号

筛选选择器(方法)

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟

总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

XPATH 选择器

基本语法

nodename	选取此节点的所有子节点
/	从根节点选取
//	从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置
.	选取当前节点
…	选取当前节点的父节点
@	选取属性

代码示例

doc='''
<html>
 <head>
  <base href='http://example.com/' />
  <title>Example website</title>
 </head>
 <body>
  <div id='images'>
   <a href='image1.html' id='id_a'>Name: My image 1 <br/><img src='image1_thumb.jpg' /></a>
   <a href='image2.html'>Name: My image 2 <br /><img src='image2_thumb.jpg' /></a>
   <a href='image3.html'>Name: My image 3 <br /><img src='image3_thumb.jpg' /></a>
   <a href='image4.html'>Name: My image 4 <br /><img src='image4_thumb.jpg' /></a>
   <a href='image5.html' class='li li-item' name='items'>Name: My image 5 <br /><img src='image5_thumb.jpg' /></a>
   <a href='image6.html' name='items'><span><h5>test</h5></span>Name: My image 6 <br /><img src='image6_thumb.jpg' /></a>
  </div>
 </body>
</html>
'''

from lxml import etree

html=etree.HTML(doc)
# html=etree.parse('search.html',etree.HTMLParser())
# 1 所有节点
# a=html.xpath('//*')
# 2 指定节点（结果为列表）
# a=html.xpath('//head')

# 3 子节点，子孙节点
# a=html.xpath('//div/a')
# a=html.xpath('//body/a') #无数据
# a=html.xpath('//body//a')
# 4 父节点
# a=html.xpath('//body//a[@href="image1.html"]/..')
# a=html.xpath('//body//a[1]/..')
# 也可以这样
# a=html.xpath('//body//a[1]/parent::*')
# a=html.xpath('//body//a[1]/parent::div')
# 5 属性匹配
# a=html.xpath('//body//a[@href="image1.html"]')

# 6 文本获取  text()    ********
# a=html.xpath('//body//a[@href="image1.html"]/text()')

# 7 属性获取            ******
# a=html.xpath('//body//a/@href')
# a=html.xpath('//body//a/@id')
# # 注意从1 开始取（不是从0）
# a=html.xpath('//body//a[1]/@id')
# 8 属性多值匹配
#  a 标签有多个class类，直接匹配就不可以了，需要用contains
# a=html.xpath('//body//a[@class="li"]')
# a=html.xpath('//body//a[@name="items"]')
# a=html.xpath('//body//a[contains(@class,"li")]')
# a=html.xpath('//body//a[contains(@class,"li")]/text()')
# 9 多属性匹配
# a=html.xpath('//body//a[contains(@class,"li") or @name="items"]')
# a=html.xpath('//body//a[contains(@class,"li") and @name="items"]/text()')

# 10 按序选择
# a=html.xpath('//a[2]/text()')
# a=html.xpath('//a[3]/@href')
# 取最后一个
# a=html.xpath('//a[last()]/@href')
# 位置小于3的
# a=html.xpath('//a[position()<3]/@href')
# 倒数第二个
# a=html.xpath('//a[last()-2]/@href')
# 11 节点轴选择
# ancestor：祖先节点
# 使用了* 获取所有祖先节点
# a=html.xpath('//a/ancestor::*')
# # 获取祖先节点中的div
# a=html.xpath('//a/ancestor::div')
# attribute：属性值
# a=html.xpath('//a[1]/attribute::*')
# a=html.xpath('//a[1]/attribute::href')
# child：直接子节点
# a=html.xpath('//a[1]/child::*')
# descendant：所有子孙节点
# a=html.xpath('//a[6]/descendant::*')

# following:当前节点之后所有节点
# a=html.xpath('//a[1]/following::*')
# a=html.xpath('//a[1]/following::*[1]/@href')
# following-sibling:当前节点之后同级节点
# a=html.xpath('//a[1]/following-sibling::*')
# a=html.xpath('//a[1]/following-sibling::a')
# a=html.xpath('//a[1]/following-sibling::*[2]')
a=html.xpath('//a[1]/following-sibling::*[2]/@href')

print(a)