a超链接时,各伪类需按特定的顺序书写才能生效,保证各浏览器具有相同的表现。...CSS3 E:nth-child(n) { sRules } 要使该属性生效,E 元素必须是某个元素的子元素,E 的父元素最高是 body,即 E 可以是 body 的子元素 匹配父元素的第 n 个子元素...> :nth-of-type(n) CSS3 E:nth-of-type(n) { sRules } 匹配同类型中的第n个同级兄弟元素E 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html...,即E可以是html的子元素,也就是说E可以是body 该选择符总是能命中父元素的第n个为E的子元素,不论第n个子元素是否为E /* 设置父元素第二个 p 元素为红色,虽然该 p...n) CSS3 E:nth-last-of-type(n) { sRules } 匹配同类型中的倒数第n个同级兄弟元素E 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是
而对于css来讲,它的选择器就是能帮他找到指定元素的方法。 2....css还为我们提供了特殊的选择器,能够帮助我们像类和元素一样去做出更复杂的选择。 2.4.1伪类选择器 效果就像给某些特定的元素添加一个类,当然该元素是已存在的。...(n) 选择父元素的第n个子元素,父元素是E,子元素是F E F:nth-last-child(n) 选择父元素的倒数第n个子元素,父元素是E,子元素是F E F:nth-of-type(n) 选择父元素的具有指定类型的第...n个子元素,父元素是E,子元素是F E F:nth-last-of-type(n) 选择父元素的具有指定类型的倒数第n个子元素,父元素是E,子元素是F E:first-of-type 选择父元素中具有指定类型的第...1个子元素,与E:nth-of-type(1)相同 E:last-of-type 选择父元素中具有指定类型的最后1个子元素,与E:nth-last-of-type(1)相同 E:only-child 选择父元素中只包含一个子元素
1、class 和 id 的使用场景? id:指定标签的唯一标识。根据提供的唯一id号,快速获取标签对象。如:document.getElementById(id)。...id属性的值,在当前的page页面要是唯一的。 class:指定标签的类名。CSS操作,把一些特定样式放到一个class类中,需要此样式的标签,可以在添加此类。 2、CSS选择器常见的有几种?...的元素,div[id]就能取到所有有id属性的div | | E[attr = value] | 匹配属性attr值为value的元素,div[id=test],匹配id=test的div | |...E[attr ~= value] | 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 | | E[attr ^= value] | 匹配属性attr的值以value开头的元素|...文档,就是HTML元素| |E:nth-child(n)| 匹配其父元素的第n个子元素,第一个编号为1| |E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素,第一个编号为1
选择器(重点) 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。...类选择器最大的优势是可以为元素对象定义单独或相同的样式。 小技巧: 1.长名称或词组可以使用中横线来为选择器命名。 2.不要纯数字、中文等命名, 尽量使用英文字母来表示。 案例: ?...比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。...:选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型...:nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
Scrapy使用自带的XPath选择器和CSS选择器来选择HTML文档中特定部分的内容,XPath是用来选择XML和HTML文档中节点的语言,CSS是为HTML文档应用样式的语言,也可以用来选择具有特定样式的...读取目标网页成功后,自动调用回调函数parse(),在回调函数parse()中使用response对象表示服务器返回的网页源代码,response对象的selector属性可以创建相应的选择器对象,然后再调用...xpath()或css()方法获取指定的内容,也可以直接使用response对象的xpath()和css()方法进行选择,然后调用get()方法获取第一项结果、调用getall()和extract()方法获取包含所有结果的列表...属性 //@* 选择所有节点的任意属性 //img[@src] 选择所有具有src属性的img节点 //div[@id="images"] 选择所有id="images"的div节点 //img | /...a:nth-child(3) 选择第3个a节点 a:nth-child(2n+1) 选择所有第奇数个a节点 a:nth-child(2n) 选择所有第偶数个a节点 li:last-child 选择每组中最后一个
文章公众号首发,关注 程序员哆啦A梦 第一时间获取最新的文章 ❤️笔芯❤️~ CSS使用 示例: <!...,将特殊的样式添加到页面对象的第一个子元素中 :lang,允许设计者定义指定的页面中所使用的语言 文字字号 font-size属性的作用改变字体的大小。...CSS3新特性 有在属性选择符中引入通配符,灵活的伪类选择符nth-child()等。 属性选择符 E[attr],选择具有attr属性的E元素。...E E:last-child,匹配父元素的最后一个子元素E E:nth-child(n),匹配父元素的第n个子元素E E:nth-last-child(n),匹配父元素的倒数第n个子元素E E:only-child...E E:nth-of-type(n),匹配同类型中的第N个同级兄弟元素E E:nth-last-of-type(n),匹配同类型中的倒数第n个同级兄弟元素E CSS结构伪类选择符 E:link,设置超链接
常见属性: 3.HTML5新增的input类型 4.HTML5新增的表单属性 二.CSS3的新特性 新增选择器: 1.属性选择器 属性选择器可以根据元素特定属性的来选择元素。...2.结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素, 常用于根据父级选择器里面的子元素 3.结构伪类选择器 nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点) n 可以是数字...,关键字和公式 n 如果是数字,就是选择第 n 个子元素, 里面数字从1开始… n 可以是关键字:even 偶数,odd 奇数 n 可以是公式:常见的公式如下 ( 如果n是公式,则从0开始计算,但是第...7.CSS3 过渡(重点) 过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果...我们现在经常和 :hover 一起 搭配使用。 属性 :想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都 变化过渡, 写一个all 就可以。
虽然它和普通的 CSS 类相似,可以为已有的元素添加样式,但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式,所以将其称为伪类。...,该p元素必须是其父元素的第2个子元素 :nth-last-child(n) p:nth-last-child(2) 选择符合的p元素,该p元素必须是其父元素的倒数第2个子元素 :nth-last-of-type...(n) p:nth-last-of-type(2) 选择符合的p元素,该p元素必须是其父元素的倒数第2个p子元素 :nth-of-type(n) p:nth-of-type(2) 选择符合的p元素,该p...4 伪元素列举 伪类和伪元素-2.png 4.1 单双冒号 选择器 示例 示例说明 ::before/:before 在被选元素前插入内容 需要使用 content 属性来指定要插入的内容。...该伪元素不是 CSS 的标准,它的实现可能在将来会有所改变,所以要决定使用时必须谨慎。
,必须配合content属性来指定要插入的具体内容。...:nth-child(n)和nth-last-child(n)选择器 使用:first- child选择器和:last- child选择器可以选择某个父元素中第-一个或最后一个子元素,但是如果用户想要选择第...:nth-of-type(n)和:nth-last-of-type(n)选择器 这两种选择器的不同之处在于:nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第...n个子元素和倒数第n个子元素,而:nth-child(n)和:nth-last-child(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素,与元素类型无关。...1.png •CSS定位 –在网页开发中,如果需要网页中的某个元素在网页的特定位置出现,例如弹出菜单,这时可以通过CSS的position属性进行设置,示例如下: position:relative;
-- 结果属于第 n 个子节点(单数节点:odd,偶数节点:even) --> selector:nth-child(n) { ...查找第n个子selector,后同。 } selector:nth-child(an+b) { ... } selector:nth-of-type(n) { ... } <!...-- 结果相同元素的属于第 an+b 个子节点(n从0开始的递增值,a、b为数字。)...注意:使用某种特定的字体系列(Geneva)完全取决于用户机器上该字体系列是否可用;这个属性没有指示任何字体下载。因此,强烈推荐使用一个通用字体系列名作为后路。
id]") 匹配所有具有指定属性的元素 $("input[name='newsletter']")匹配所有具有指定属性值的元素 $("input[name!...='newsletter']")匹配所有不具有指定属性值的元素 $("input[name^='news']") 匹配所有指定属性值以value开头的元素 $("input[name$='letter'...子元素过滤选择器 $("ul li:nth-child(2)"), $("ul li:nth-child(odd)"), 匹配父元素的第n个子元素 $("ul li:nth-child(3n + 1)...") $("div span:first-child")匹配父元素的第1个子元素 $("div span:last-child") 匹配父元素的最后1个子元素 $("div button:only-child...$.grep( [0,1,2], function(n,i){ return n > 0; }); jQuery.makeArray( obj ) 将一个类似数组的对象转化为一个真正的数组 将选取的div
div ~ p{ background-color:#00FF00; } 二.属性选择器: 25:E[att ^= val],匹配属性att的值以...(也就是说可能存在其他文档形式时使用,选中的是该文档类型的根元素) :root{ background:red; } /*经测试,像div:root这样的写法是无效的*/ ...li:last-child{ background-color:red; } 33:E:nth-child(n),匹配其父元素的第n个子元素,从1...n个子元素,倒数第一个的index为1。...参考:css选择器笔记,30个你必须熟记的css选择器,MDN-docs-选择器介绍,HTML5和CSS3权威指南(第3版下册-庐陵牛)第十九章,before和after伪元素的用法。
div ~ p{ background-color:#00FF00; } 二.属性选择器: 25:E[att ^= val],匹配属性att的值以...(也就是说可能存在其他文档形式时使用,选中的是该文档类型的根元素) :root{ background:red; } /*经测试,像div:root这样的写法是无效的*/...li:last-child{ background-color:red; } 33:E:nth-child(n),匹配其父元素的第n个子元素,从1...,匹配其父元素的倒数第n个子元素,倒数第一个的index为1。...参考:css选择器笔记,30个你必须熟记的css选择器,MDN-docs-选择器介绍,HTML5和CSS3权威指南(第3版下册-庐陵牛)第十九章,before和after伪元素的用法。
一、属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1、E[attr] 表示存在attr属性即可; div[class] 2、E[attr=val] 表示属性值完全等于val; div...E:first-child 第一个子元素 E:last-child 最后一个子元素 E:nth-child(n) 第n个子元素,计算方法是E元素的全部兄弟元素; div>ul>li:nth-child...E元素;(使用不是非常广泛) 没有任何的子元素,包括空格. 3、目标伪类 E:target 结合锚点进行使用,处于当前锚点的元素会被选中; CSS... 选择某个元素的第一个子元素; :last-child 选择某个元素的最后一个子元素; :nth-child() 选择某个元素的一个或多个特定的子元素; :nth-last-child() ...选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算; :nth-of-type() 选择指定的元素; :nth-last-of-type() 选择指定的元素,从元素的最后一个开始计算
/ input[type=text] { color: pink; } /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */ div[class^=...{ color: blue; } 属性选择器,按照字面意思,都是根据标签中的属性来选择元素 属性选择器可以根据元素特定属性的来选择元素。...(★★★) 匹配到父元素的第n个元素 匹配到父元素的第2个子元素 ul li:nth-child(2){} 匹配到父元素的序号为奇数的子元素 ul li:nth-child(odd){} odd 是关键字...匹配父元素的第n个子元素E,也就是说,nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配 E:nth-of-type(n) 匹配同类型中的第...括号里面可以使用 + - * / 来进行计算 CSS3 过渡(★★★) 过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下
().css(”border”, “2px red solid”); JQuery Selectors 方法说明 基本选择器 $(”#myDiv”) 匹配唯一的具有此id值的元素 $(”div”) 匹配指定名称的所有元素...”) 匹配所有可见的元素 属性过滤选择器 $(”div[id]”) 匹配所有具有指定属性的元素 $(”input[name =’newsletter’]”) 匹配所有具有指定属性值的元素 $(”input...=’newsletter’]”) 匹配所有不具有指定属性值的元素 $(”input[name ^=’news’]”) 匹配所有指定属性值以value开头的元素 ( ” i n p u t [ n a m...$(”ul li: nth - child(2)”), $(”ul li: nth - child(odd)”), 匹配父元素的第n个子元素 $(”ul li: nth - child(3n + 1)...”) $(”div span: first - child”) 匹配父元素的第1个子元素 $(”div span: last - child”) 匹配父元素的最后1个子元素 $(”div button
E[attr~=val] 选择具有 att 属性且属性值为:用空格分隔的字词列表,其中一个等于 val 的E元素。...E:last-child 匹配父元素的最后一个子元素E。 E:nth-child(n) 匹配父元素的第n个子元素E。注意,盒子的编号是从1开始算起,不是从0开始算起。...E:nth-child(odd) 匹配奇数 E:nth-child(even) 匹配偶数 E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。...伪元素选择器 伪元素选择器的标志性符号是 :: 1、格式:(第一部分) E::before 设置在 元素E 前面(依据对象树的逻辑结构)的内容,配合content属性一起使用。...E::after 设置在 元素E 后面(依据对象树的逻辑结构)的内容,配合content属性一起使用。 E:after、E:before 在旧版本里是伪类,在 CSS3 这个新版本里是伪元素。
value="登录"属性的标签 [type="submit"] 选择标签上有type="submit"属性的标签 属性选择器—不指定值 [title] 匹配属性有title的标签 属性选择器—指定标签...(n) 匹配第 n 个子元素 nth-last-child(n) 匹配倒数第n个子元素 nth-of-type(n) 匹配第 n 个指定类型的标签 first-child 匹配第一个标签 last-child...XPATH://div/input CSS: div>input 后代元素 如果一个元素在另一个元素的内部(子元素或者孙元素),则它在 XPATH 中使用“//”定义,而在 CSS 中仅使用空格定义...XPATH://div//input CSS: div input ID定位 XPATH 中的元素 id 使用以下内容定义:"[@id=‘kw’]",而在CSS中使用:"#kw"。...: //input/parent CSS: 无法实现 属性值 可以根据任何属性值定位元素 XPATH: //input[@name='username'] CSS: input[name='username
属性选择器 CSS 2.1 E[attr] 匹配所有具有 attr 属性的 E 元素(E 可以省略,如 [checked]) E[attr=val] 匹配所有 attr 属性值为 val 的 E...元素 E[attr~=val] 匹配所有 attr 属性具有多个空格分隔的值、其中一个值等于 val 的 E 元素,如具有多个 class 名的元素 CSS 3 E[attr^="val"] 属性值...伪类:以冒号为前缀,被添加到一个选择器末尾的关键字,样式在特定状态下才被呈现到指定的元素 CSS 2.1 E:first-child 匹配父元素的第一个子元素 E:link 匹配所有未被点击的链接...匹配其父元素的第n个子元素,第一个编号为1 E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素 E:nth-last-of-type(n) 与:nth-last-child...'none' 的元素 isolation 属性被设置为 'isolate' 的元素 position:fixed 在 will-change 中指定了任意 CSS 属性,即便没有直接指定这些属性的值
虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。 状态性伪类 是基于元素当前状态进行选择的。...结构性伪类 CSS3新增选择器,利用dom树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少class和id属性的定义,使文档结构更简洁。...(n) 选择属于其父元素的第n个子元素的每个div元素 div:nth-last-child(n) 同上,从这个元素的最后一个子元素开始算 div:nth-of-type(n) 选择属于其父元素第n个div...元素的每个div元素 div:nth-last-of-type(n) 同上,但是从最后一个子元素开始计数 div:first-of-type 选择属于其父元素的首个div元素的每个div元素 div:last-of-type...CSS3规范中要求使用单冒号:用于CSS3伪类,双冒号::用于 CSS3伪元素,目的是区分伪类和伪元素。
领取专属 10元无门槛券
手把手带您无忧上云