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元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
