精华内容
下载资源
问答
  • 列举一些常用的属性选择器,一切都在代码中,就不列了! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...

    列举一些常用的属性选择器,一切都在代码中,就不列了!

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./node_modules/jquery/dist/jquery.js"></script>
       
    </head>
    <body>
        <form>
            <input type="text">
            <input type="password">
            <input type="checkbox" name="hobby"><label>游泳</label>
            <input type="checkbox" name="hobby"><label>篮球</label>
        </form>
        <div abc="3" hobby="abcde" toggle='book-1' class="div1 div2">1</div>
        <div  hobby="abc" toggle='book-2' class="div2 div3 div1">2</div>
        <div abc="4" hobby="ade" toggle='book' class="div2 div1 div3">3</div>
        <div abc="4" hobby="ade" toggle='book3' class="div3 div4">4</div>
        <div abc="4" hobby="ade" toggle='book3' class="div32">5</div>
        <script>
            $("input[type=text]").css("color","red");
    
            选择有type属性的元素
            $("[type]")
            $("[abc]").css("color","red");
    
            选择有type和name属性的元素
            $("[type][name]").next("label").css("color","red");
    
            选择某个属性是某个值的元素
            $("[abc=3]").css("color","red");
    
            选择属性是hobby并且值是以a字母开始的元素
            $("[hobby^=a]").css("color","red");
    
            选择属性是hobby并且值是以e字母结束的元素
            $("[hobby$=e]").css("color","red");
    
            选择属性是hobby但是值不等于ade的所有元素,如果属性没有也会被选中
            $("div[hobby!=ade]").css("color","red");
    
            选择属性是toggle,并且这个属性的值是book起头,后面紧跟-的值
            $("[toggle|=book]").css("color","red");
    
    
            原生js中变量和函数名都必须使用驼峰式命名,因为js是区分大小写
            html和css是不区分大小写,所以在html和css中,自定义的名称无法使用驼峰式命名,使用-连接两个单词
            php中变量名区分大小写,所以使用驼峰式命名,函数名不区分大小写,单词直接使用_连接
    
            选择属性是class,属性值中包含div3或者等于div3.包含div3在这里是指div3是一个独立的单词,前后有空格隔开
            $("[class~=div3]").css("color","red");
    
            选择属性是class,属性值的字符串中含有div3字符的,可以不是一个独立的单词
            $("[class*=div3]").css("color","red");
    
    
    
        </script>
    </body>
    </html>
    

    如果有没找到的选择器可以看一下下面的!
    jQuery常用选择器

    展开全文
  • Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通过特定的Xpath或者CSS表达式来选择HTML文件的某个...XPath选择器常用的路径表达式,这里列举了一些常用的,XPath的功能非常强大,内含超过100个的内建...
    3666ba9e25655a2f7f2972a5bab8a1ae.png

    Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通过特定的Xpath或者CSS表达式来选择HTML文件的某个部分

    Xpath是专门在XML文件中选择节点的语言,也可以用在HTML上。

    CSS是一门将HTML文档样式化语言,选择器由它定义,并与特定的HTML元素的样式相关联。

    XPath选择器

    常用的路径表达式,这里列举了一些常用的,XPath的功能非常强大,内含超过100个的内建函数。

    下面为常用的方法

    ba8cc35563dde3812e9172d85d48190e.png

    CSS选择器

    CSS层叠样式表,语法由两个主要部分组成:选择器,一条或多条声明

    Selector {declaration1;declaration2;……}

    下面为常用的使用方法

    746e254a519c384b0dafa29c3e96b4e0.png

    选择器的使用例子

    上面我们列举了两种选择器的常用方法,下面通过scrapy帮助文档提供的一个地址来做演示

    地址:http://doc.scrapy.org/en/latest/_static/selectors-sample1.html

    这个地址的网页源码为:

       Example website
    Name: My image 1 Name: My image 2 Name: My image 3 Name: My image 4 Name: My image 5

    我们通过scrapy shell http://doc.scrapy.org/en/latest/_static/selectors-sample1.html来演示两种选择器的功能

    4cde3325f904481b3ca8e92a8640a602.png

    获取title

    这里的extract_first()就可以获取title标签的文本内容,因为我们第一个通过xpath返回的结果是一个列表,所以我们通过extract()之后返回的也是一个列表,而extract_first()可以直接返回第一个值,extract_first()有一个参数default,例如:extract_first(default="")表示如果匹配不到返回一个空

    In [1]: response.xpath('//title/text()')Out[1]: []In [2]: response.xpath('//title/text()').extract_first()Out[2]: 'Example website'In [6]: response.xpath('//title/text()').extract()Out[6]: ['Example website']

    同样的我们也可以通过css选择器获取,例子如下:

    In [7]: response.css('title::text')Out[7]: []In [8]: response.css('title::text').extract_first()Out[8]: 'Example website'

    查找图片信息

    这里通过xpath和css结合使用获取图片的src地址:

    In [13]: response.xpath('//div[@id="images"]').css('img')Out[13]: [, , , , ]In [14]: response.xpath('//div[@id="images"]').css('img::attr(src)').extract()Out[14]: ['image1_thumb.jpg', 'image2_thumb.jpg', 'image3_thumb.jpg', 'image4_thumb.jpg', 'image5_thumb.jpg']

    查找a标签信息

    这里分别通过xapth和css选择器获取a标签的href内容,以及文本信息,css获取属性信息是通过attr,xpath是通过@属性名

    In [15]: response.xpath('//a/@href')Out[15]: [, , , , ]In [16]: response.xpath('//a/@href').extract()Out[16]: ['image1.html', 'image2.html', 'image3.html', 'image4.html', 'image5.html']In [17]: response.css('a::attr(href)')Out[17]: [, , , , ]In [18]: response.css('a::attr(href)').extract()Out[18]: ['image1.html', 'image2.html', 'image3.html', 'image4.html', 'image5.html']In [27]: response.css('a::text').extract()Out[27]: ['Name: My image 1 ', 'Name: My image 2 ', 'Name: My image 3 ', 'Name: My image 4 ', 'Name: My image 5 ']In [28]: response.xpath('//a/text()').extract()Out[28]: ['Name: My image 1 ', 'Name: My image 2 ', 'Name: My image 3 ', 'Name: My image 4 ', 'Name: My image 5 ']In [29]: 

    高级用法

    查找属性名称包含img的所有的超链接,通过contains实现

    In [36]: response.xpath('//a[contains(@href,"image")]/@href').extract()Out[36]: ['image1.html', 'image2.html', 'image3.html', 'image4.html', 'image5.html']In [37]: response.css('a[href*=image]::attr(href)').extract()Out[37]: ['image1.html', 'image2.html', 'image3.html', 'image4.html', 'image5.html']In [38]: 

    查找img的src属性

    In [41]: response.xpath('//a[contains(@href,"image")]/img/@src').extract()Out[41]: ['image1_thumb.jpg', 'image2_thumb.jpg', 'image3_thumb.jpg', 'image4_thumb.jpg', 'image5_thumb.jpg']In [42]: response.css('a[href*=image] img::attr(src)').extract()Out[42]: ['image1_thumb.jpg', 'image2_thumb.jpg', 'image3_thumb.jpg', 'image4_thumb.jpg', 'image5_thumb.jpg']In [43]: 

    提取a标签的文本中name后面的内容,这里提供了正则的方法re和re_first

    In [43]: response.css('a::text').re('Name:(.*)')Out[43]: [' My image 1 ', ' My image 2 ', ' My image 3 ', ' My image 4 ', ' My image 5 ']In [44]: response.css('a::text').re_first('Name:(.*)')Out[44]: ' My image 1 '

    做什么事情都需要不断地坚持下去,编程也一样。现在python语言十分火热,职场对python的需求也很高,薪资待遇都很棒。所以希望大家能够坚持学习,‘剩’者为王,坚持下来的人才有资格称王。如果你觉得本文对你的学习有帮助的话,不妨点个关注,我会持续更新。

    展开全文
  • 最全css选择器说明

    2019-12-18 10:49:56
    1.css老版本选择器 (1)元素选择器element(权重0) 直接在style中用元素设置选择器 (2)类选择器.(权重10) (3)id选择器#(权重100) ...1.属性选择器(权重1) e[属性] 选择什么属性选择器 e...

    1.css老版本选择器

    (1)元素选择器element(权重0)
    直接在style中用元素设置的选择器
    (2)类选择器.(权重10)
    (3)id选择器#(权重100)
    (4)通配符选择器*(权重0)
    (5)伪类选择器(权重10)
    link,visited,hover,active
    (6)其他一些不常用的没有列举

    2.css3的选择器

    1.属性选择器(权重1)
    e[属性] 选择什么属性的选择器
    e[属性=值] 选择什么属性且等于什么值
    e[属性^=值] 选择什么属性并且以什么值开始
    e[属性$=值] 选择什么属性并且以什么值结尾
    e[属性*=值] 选择什么属性并且包含什么值

    2.结构伪类选择器(权重10)
    e:first-child 选择这个子集元素的父元素中子集元素的第一个
    e:last-child 选择这个子集元素的父元素中子集元素的最后一个
    e:nth-child(n) 选择这个子集元素的父元素中子集元素的第几个,n可以是数字,公式,关键字,是公式的话从零开始算
    e:first-of-type 选择这个子集元素的父元素中这种类型元素的第一个
    e:first-of-type 选择这个子集元素的父元素中这种类型元素的第一个
    e:nth-of-type(n) 选择这个子集元素的父元素中这种类型元素的第几个,n可以是数字,公式,关键字,是公式的话从零开始算

    3.伪元素选择器(权重1)
    因为不是真正的元素,但是有元素的性质,所以叫伪元素选择器
    e::before 在元素之前插入
    e::after 在元素之后插入

    注意:伪元素选择器必须加content,content里面是内容,用引号包裹,伪元素选择器的元素默认是行内元素

    展开全文
  • CSS3新特性

    2019-10-03 23:47:27
     1)属性选择器  [属性名^="a"]选取指定属性以a开头元素  [属性名$="b"]选取指定属性值以b结尾元素  [属性名*="g"]选取指定属性值包含g元素  2)序选择器  同类型中  p:first-of type 选择每个p...

    一、选择器

      列举一些常用的,如下

      1)属性选择器

        [属性名^="a"]选取指定属性以a开头的元素

        [属性名$="b"]选取指定属性值以b结尾的元素

        [属性名*="g"]选取指定属性值包含g的元素

      2)序选择器

        同类型中

        p:first-of type  选择每个p元素是其父级的第一个P元素

        p:last-of type  选择每个p元素是其父级的最后一个P元素

        p:only-of type  选择每个p元素是其父级的唯一一个P元素

        同级别中

        p:nth-child(2)  选择每个p元素是其父级的第二个子元素

        p:last-child(2)  选择每个p元素是其父级的最后一个子元素

        p:only-child     选择每个p元素是其父级的唯一一个子元素

    二、边框

    • border-radius:创建圆角矩形,数值越大弧度越大。属性值可以是,px % em
      • 创建圆形技巧,元素宽高相等,border-radius为宽高的一半
      •           
    • box-shadow:h-shadow v-shadow blur spread color inset
      • h-shadow:水平距离,必须
      • v-shadow:垂直距离,必须
      • blur:模糊距离
      • spread:模糊尺寸
      • color:颜色
      • inset:修改为内阴影,默认是外阴影
        •      
    • border-image:使用图片来创建边框
      • border-image:url(border.png) 30 30 round;

    三、背景

      -background-size:背景尺寸

        

     

     

       -background-origin:背景定位属性

        

     

     

     

            

     

     

     

     四、文本效果

      -text-shadow:水平阴影 模糊距离 阴影颜色

         text-shadow: 5px 5px 5px #FF0000;

      -word-wrap:break-word 对长的不可分割的单词进行强制换行

    五、字体

      @font-face规则:CSS3之前我们必须使用本地安装过的字体,现在可以使用任意字体

      在新的font-face规则中定义字体名称,然后通过src指向字体文件,使用font-family属性指向字体名称进行使用

      

     

     

     六、2D转换

     transform的相关方法

      

     

     

     七、3D转换

      相关属性

      

     

     

     

       transform相关方法

      

     

     

     八、过渡与动画

      1)过渡模块

        简写方式:transition:transition-property transition-duration transition-timing-function transition-delay

        transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。

        单独设置:

          

     

     

     

      2)动画模块

         

     

     

       动画其他属性:

        -延迟时间 animation-delay:1s

        -动画执行时间曲线 animation-timing-function:ease;默认值

        -动画执行次数 animation-iteration-count:3;

        -规定动画是否在下一周期逆向地播放:

          normal:默认值

          reverse:与默认值相反

          alternate:循环

        -规定动画是否正在运行或暂停  animation-play-state 默认是 "running"。

        -动画执行时间之外的状态 规定对象动画时间之外的状态。animation-fill-mode

          -none:默认值,不做任何改变

          -backwards:在animation-delay指定的时间内,在动画考试之前,应用开始属性

          -forwards:当动画完成时保持最后一个属性值(最后一帧)

          -both:等待状态和结束状态都改变  

    九、多列布局

    十、用户界面

    • resize:规定是否可由用户调整元素尺寸

        

     

       outline-offser:对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

        轮廓与边框的不同:

          *轮廓可能死非矩形

          *轮廓不占用空间

          

     

     

    • box-sizing

      

    转载于:https://www.cnblogs.com/qqinhappyhappy/p/11569649.html

    展开全文
  • 第5模块闯关CSS练习题

    2018-09-07 09:50:00
    1.列举你知道的css选择器? 说道css选择器,大家都知道有许多种,但是...属性选择器(id和class都是属性,特殊的属性); 2.1. 标签选择器 2.1.1 通用选择 *  通用选择器 * 大家应该都比较熟悉了,最常用的就...
  • css与css3相关应用

    2020-07-30 14:29:48
    css中拥有三种选择器,其中包括id选择器、类选择器、属性选择器。 id选择器 使用前需要对操作的内容赋予id值,例如 :<div id="box1"></div> 之后在.css中,使用#box1{ }进行操作,修改添加相应的属性...
  • IE CSS Hack【记录】

    2019-01-08 10:10:00
    本文只列举了一些常用的CSS Hack,且不考虑IE6以下的版本 尽可能减少对CSS Hack的使用,使用CSS Hack会带来维护成本的提高以及浏览器版本变化类似Hack失效等问题 1、条件hack 用于选择IE及IE不同版本,IE10及.....
  • 今日任务:了解学习DOM的基础知识以及...所以这里列举了一些比较常用的重要的方法。 CSS 选择器,关键方法:get、query class 属性相关操作,关键方法:addClass、removeClass、hasClass 通用属性操作,关键方法:att
  • CSS个人梳理

    2020-07-11 12:51:52
      选择器的种类和使用这里就不罗列了,有兴趣可参考css手册,这里只汇总常用的对css的属性样式设置(详细的列举过于复杂,而且好多市场已经淘汰了),不过为更明了,代码会使用类选择器或者标签选择器,将样式设置在...
  • assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制。在实现中,assertion就是在程序中的一条语句,它对一个boolean表达式进行检查,一个正确程序必须保证这个boolean表达式的值为...
  • CSS设置文本样式

    千次阅读 2018-03-27 21:08:55
    这里我就列举几个常用的样式,仅供参考 1,设置文本字体: 用font-family属性 Code: 注:这里都用到类别选择器 2,设置文字倾斜效果: p{ font-style: italic; } 3,设置文字加粗效果: p{ font-...
  • 实例273 支持图片预览文件选择对话框 实例274 颜色选择对话框 实例275 信息输入对话框 实例276 定制信息对话框 11.7 MDI窗体使用 实例277 创建内部子窗体 实例278 使子窗体最大化显示 实例279 对子窗体...
  • 实例273 支持图片预览文件选择对话框 实例274 颜色选择对话框 实例275 信息输入对话框 实例276 定制信息对话框 11.7 MDI窗体使用 实例277 创建内部子窗体 实例278 使子窗体最大化显示 实例279 对子窗体...
  • 第3章对选择集的使用进行了全面的剖析,为SendCommand提供了更广泛的应用,分析了直线、圆、圆弧和样条曲线向多段线的转化,提供了一些常用的多段线操作,提出制图法解决问题的新思路,编写了根据起点、终点和弧长...
  •  《Java开发实战1200例》分为I、II两卷共计1200个例子,包括了开发中各个方面最常用的实例,是目前市场上实例最全面的开发类图书;书中实例来源于多位工程师的多年积累,具有很强的实用性。 本书是第II卷,以开发...
  •  《Java开发实战1200例》分为I、II两卷共计1200个例子,包括了开发中各个方面最常用的实例,是目前市场上实例最全面的开发类图书;书中实例来源于多位工程师的多年积累,具有很强的实用性。 本书是第II卷,以开发...
  •  《Java Web开发实战1200例》分为I、II两卷共计1200个例子,包括了开发中各个方面最常用的实例,是目前市场上实例最全面的开发类图书;书中实例来源于多位工程师的多年积累,具有很强的实用性。 本书是第II卷,以...
  • 22.常用的调用WebService的方法有哪些? 答:1.使用WSDL.exe命令行工具。 2.使用VS.NET中的Add Web Reference菜单选项 23..net Remoting 的工作原理是什么? 答:服务器端向客户端发送一个进程编号,一个程序域...
  • java 面试题 总结

    2009-09-16 08:45:34
    assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制。在实现中,assertion就是在程序中的一条语句,它对一个boolean表达式进行检查,一个正确程序必须保证这个boolean表达式的值为...
  • Excel VBA实用技巧大全 附书源码

    热门讨论 2010-10-08 18:59:24
    01056显示常用的Excel内置对话框 01057获取Excel菜单栏信息 01058获取Excel图表工具栏信息 01059获取Excel常用工具栏信息 01060获取Excel格式工具栏信息 01061获取Excel数据透视表工具栏信息 01062获取Excel的Web...
  • Java典型模块

    2012-02-25 18:27:40
    18.3.3 File类提供的属性和方法 18.3.4 文件访问的基本概念 18.3.5 文件的基本访问方式——字节方式 18.3.6 文件的基本访问方式——字符方式 18.3.7 文件的高级访问方式 18.4 小结 第19章 文件内容查看(GUI+文件...
  • 4、CSS选择器包括? 12 5、用css3语法中,如何实现一个矩形框圆角效果和50%红色透明效果?,请写出关键脚本 12 6、Div与Table区别 13 7、行级标签转块级标签,块级标签转行级标签 13 二、Java基础部分 13 1、...
  • 【任务管理】 增强型系统任务管理,提供进程PID及路径、进程文件属性及详细说明,以及进行结束进程与删除进程及设置LEVEL等操作。 【系统功能信息】 系统功能调用及相关信息,关闭电脑、重启电脑、电脑使用...
  • EXCEL集成工具箱V6.0

    2010-09-11 01:44:37
    【任务管理】 增强型系统任务管理,提供进程PID及路径、进程文件属性及详细说明,以及进行结束进程与删除进程及设置LEVEL等操作。 【系统功能信息】 系统功能调用及相关信息,关闭电脑、重启电脑、电脑使用...
  • 【系统常用工具】 系统常用工具快捷调用,例如:计算器、记事本、WORD、画图板。 【隐藏选项卡】 可以隐藏Excel2007及2010功能区各选项卡(如:开始、插入、开发工具等)。 图 片 工 具 【选择本表图片】 将...
  • 、秒表、捉迷藏游戏、鼠标绘直线、指针时钟项目、控制动画项目、记事本、拼图游戏、文件属性查看、文件内容 查看、日记簿、查找和替换项目、图像轮显动画项目、applet事件监听项目、动画播放项目、网络聊天室...
  • 【系统常用工具】 系统常用工具快捷调用,例如:计算器、记事本、WORD、画图板。 【隐藏选项卡】 可以隐藏Excel2007及2010功能区各选项卡(如:开始、插入、开发工具等)。 图 片 工 具 【选择本表图片】 将...
  • Java开发实战1200例.第2卷.part3

    热门讨论 2013-05-08 22:46:34
    实例018 XSD中属性打包 30 实例019 XSD中对元素限定 32 实例020 在XSD中使用取值范围限定 34 实例021 在XSD中声明元素属性 36 实例022 在XSD中对字符进行限制 38 实例023 在XSD中对数值进行限制 39 1.3 XML...
  • Java开发实战1200例.第2卷.part2

    热门讨论 2013-05-08 22:45:35
    实例018 XSD中属性打包 30 实例019 XSD中对元素限定 32 实例020 在XSD中使用取值范围限定 34 实例021 在XSD中声明元素属性 36 实例022 在XSD中对字符进行限制 38 实例023 在XSD中对数值进行限制 39 1.3 XML...
  • 【系统常用工具】 系统常用工具快捷调用,例如:计算器、记事本、WORD、画图板。 【隐藏选项卡】 可以隐藏Excel2007及2010功能区各选项卡(如:开始、插入、开发工具等)。 图 片 工 具 【选择本表图片】 将...

空空如也

空空如也

1 2 3
收藏数 54
精华内容 21
关键字:

列举常用的属性选择器