---- 本文来系统的学习一下 CSS 选择器相关的内容。 1.id选择器 ID 选择器以 # 开头，它选择的是文档中 id 属性的值。...background: green } 2.类选择器 类选择器以一个句点（.）开头，它选择的是文档中应用了这个类的所有元素。...:nth-child 匹配一列兄弟元素中的元素——兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。...:nth-of-type 匹配某种类型的一列兄弟元素（比如 p 元素）——兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7等。即所有的奇数个）。...从后往前数的所有奇数个）。 :nth-last-of-type 匹配某种类型的一列兄弟元素（比如 p 元素），从后往前倒数。
它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护； 伪类就是开头为冒号的关键字： :pseudo-class-name 伪类示例... 用户行为伪类 一些伪类只会在用户以某种方式和文档交互的时候应用。这些用户行为伪类，有时叫做动态伪类，表现得就像是一个类在用户和元素交互的时候加到了元素上一样。...:first 匹配分页媒体的第一页。 :first-child 匹配兄弟元素中的第一个元素。 :first-of-type 匹配兄弟元素中第一个某种类型的元素。...:not 匹配作为值传入自身的选择器未匹配的物件。 :nth-child 匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。...:nth-of-type 匹配某种类型的一列兄弟元素（比如，元素）——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。
群组选择器 .one,.two 多个选择器使用逗号分隔，取并集 复合选择器 .one.two 多个选择器组合使用，取交集 $(document) //选择整个文档对象...获取所有已选择到的元素中的索引为偶数的元素 selector:odd 获取所有已选择到的元素中的索引为奇数的元素 selector:eq(index) 获取所有已选择到的元素中的索引为index...attrVal的元素 selector[attrKey^=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素...selector[attrKey$=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素 selector[attrKey... $('tr:odd') //选择表格的奇数行 $('#myForm :input') // 选择表单中的input元素 $('div:visible') //选择可见的div元素
示例1.下面的 HTML 代码中，id 属性为 section-red 的 p 元素显示为红色，而 id 属性为 section-green 的 p 元素显示为绿色。...，该值必须是整个单词匹配属性值以指定值开头的每个元素。...即所有的奇数个）。 :nth-of-type 匹配某种类型的一列兄弟元素（比如，``元素）——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。...从后往前数的所有奇数个）。 :nth-last-of-type 匹配某种类型的一列兄弟元素（比如，``元素），从后往前倒数。...兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。 :only-child 匹配没有兄弟元素的元素。
[attribute|=value] 选择定义attr属性，且属性值为连续字符分割的多个值，其中第一个为字符串val的元素。 [attribute^=value] 匹配属性值以指定值开头的每个元素。...[attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。 示例：元素属性选择器 <!...后代选择器：匹配任意包含在匹配第一个选择器的元素中的元素，而不仅是直接子元素。 子代选择器：只匹配元素中的直接后代。 示例：相邻兄弟选择器&普通兄弟选择器 <!...结构性伪类选择器 其根据元素在文档中的位置选择元素。...选择器 说明 :root 匹配文档中的根元素（返回html元素） :first-child 选择元素的第一个子元素 :last-child 选择元素的最后一个子元素 :only-child 选择元素的唯一子元素
val的字符串的E元素 E[att^="val"] {}:选择具有att属性且属性值为以val开头的字符串的E元素 E[att$="val"] {}:选择具有att属性且属性值为以val结尾的字符串的E...n:所有行 2:倒数第2行 -n+3:最后3行 :only-child：只有一个元素时使用 4.目标伪类选择器 :target： 使用该选择器来对页面中的某个target元素（锚记链接）指定样式...结构伪类利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素。...css伪元素： 对元素中的特定内容进行操作，而不是描述状态 css3为了区分两者伪类使用单冒号，伪元素使用双冒号，但因为兼容问题现在大部分还是用单冒号 8.层级选择器 相邻兄弟选择器： li + li:...区别： 优雅降级是从复杂的现状开始，并试图减少用户体验的供给； 而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要； 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看
body>p { color: red; } E1~E2 选取所有 E1 元素的所有后续兄弟元素为 E2 的所有 E2 元素。...p~a { color: red; } E1 E2 选取所有 E1 元素的紧邻兄弟元素为 E2 的所有 E2 元素。...奇数行: 2n+1 或者 odd 偶数行: 2n 或者 even li:nth-child(2) { background-color: red; } E:visited E 元素是已经访问过目标的超链接的源锚点...a:visited { background-color: red; } E:link E 元素是尚未访问目标的超链接的源锚点。...(按钮按下未抬起时的状态) a:active { background-color: red; } E:target 当 E 元素是通过文档内导航跳转过来时选取该元素。
val 开头的字符串的文档元素 E /** 设置 class 属性的值以 head 开头的元素为红色 **/ div[class^="head"] { color: red; } 我是div E[attr$="val"] { sRules } 选定具有属性 attr 且属性值以 val 结尾的字符串的文档元素 E /** 设置 class 属性的值以...val 开头并用连接符 "-" 分隔的字符串（包含属性值只有 val 的情况）的文档元素 E /** 设置 class 属性的值以 head 开头并用连接符 "-" 分隔的元素为红色 **/ div[class...要使该属性生效，E 元素必须是某个元素的子元素，E 的父元素最高是 body，即 E 可以是 body 的子元素 最重要的是： E 必须是它的兄弟元素中的第一个元素，换言之，E 必须是父元素的第一个子元素...这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素 <!
先说说通过位置选择的几个操作： :first：默认情况下是相对整个页面来说的第一个，如：li:first表示整个页面的第一个li元素，而ul li:first表示整个页面的第一个li元素，并且是在ul...如：[*]li:nth-child(2)返回li元素，并且该元素是其父元素的第二个子元素； :nth-child(even|odd)：返回偶数或奇数的子节点； :nth-child(An+B)：返回满足表达式...An+B的所有子节点，比如3n+1返回所处位置为父节点子元素的是3的倍数加1的那个子元素； :even：页面范围内的处于偶数位置的元素，如：li:even返回全部偶数li元素； :odd：页面范围内的处于奇数位置的元素...； :eq(n)：第n个匹配的元素(n从0开始)，如：li:eq(3)返回整个页面的第四个li元素，ul li:eq(1)返回页面中第一个ul元素下的第二个li元素，注意：只匹配一次就返回了； :gt...:contains(hello)：选择包含文本hello的元素； :header：选择标题元素，如； :parent：选择拥有后代节点(包括文本)的元素，而排除空元素； :selected
blockquote”选取文档中的所有 元素，而”div.note” 则选取所有class属性为”note”的 元素。...如果选择器没有以标签名或通配符开头，则隐式含有一个通配符。 标签名或通配符指定了备选文档元素的一个初始集。在简单选择器中，标签类型声明之后的部分由零个或多个过滤器组成。...注意该过滤器的序号是从1开始的，因此如果一个元素是其父节点的第一个子元素，会认为它是奇数元素，匹配的是3n+1，而不是3n。...如果传入文档元素给has()，它会将选中元素集调整为那些是指定元素祖先节点的选中元素: $("p").has("a[href]") //包含链接的段落 add()方法会扩充选区，而不是对其进行过滤或提取...注意contents()不接受可选 的选择器字符串参数—因为它返回的文档节点不完全是元素，而选择器字符串仅用来描述元素节点。
（1）临近兄弟选择器 该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。...（2）普通兄弟选择器 普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。...三、结构化伪类选择器 :root选择器 :root选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。...:nth-of-type的值还可以设为odd或2n-1（奇数），even或2n（偶数），即为选择所有排序为奇数或偶数的元素 :empty选择器 :empty选择器用来选择没有子元素或文本内容为空的所有元素...:target选择器 :target选择器用于为页面中的某个target元素（该元素的id被当做页面中的超链接来使用）指定样式。
，等同于next()方法） $(document).ready(function () { // 选取class为item的下一个div兄弟元素 $('.item + div').css...，等同于nextAll()方法） $(document).ready(function () { // 选取class为inside之后的所有div兄弟元素 $('.inside ~ div...开始，以value结束，或包含value值） 在属性选择器中，^$符号和正则表达式的开始结束符号表示的含义是一致的，*模糊匹配，类似于sql中的like '%str%'。...需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。...举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。
上一个兄弟标签元素 nextSibling 下一个兄弟节点 nextElementSibling 下一个兄弟标签元素 childElementCount 第一层子元素的个数(不包括文本节点和注释) ownerDocument...指向整个文档的文档节点 node与element的区别 element是包含在node里的，它的nodeType是1 parentElement匹配的是parent为element的情况，而parentNode...匹配的则是parent为node的情况。...innerText: 表示起始标签和结束标签之间的文本 innerHTML: 表示元素的所有元素和文本的HTML代码 outerText: 与前者的区别是替换的是整个目标节点，问题返回和innerText...一样的内容 outerHTML: 与前者的区别是替换的是整个目标节点，返回元素完整的HTML代码，包括元素本身 文档节点 Document document.documentElement 代表页面中的
选择所有class属性值为连接符分隔的字符串并且该字符串以center开头的p元素和class属性值恰好等于center的p元素 var $p7 = $('p[class|="center"]'...li元素 :odd $('li:odd') 选择匹配元素集合中奇数位的li元素 :eq(n) $('eq(3)') 选择匹配元素集合中索引等于3的li元素 :gt(n) $('gt(3)') 选择匹配元素集合中索引大于...3的li元素 :lt(n) $('lt(3)') 选择匹配元素集合中索引小于3的li元素 :root $(':root') 选择文档的根元素 :header $(':header') 选择所有的标题元素...选择器的a元素 :target $(':target') 选择处于目标状态的元素（锚链接目标元素） :hidden $(':hidden') 选择处于隐藏的状态 :visible $(':visible...下面的选择器会在id属性值为box的元素中查找p元素，而不是在整个文档中查找： $('p', '#box') 后代选择器也可以像上面那样写： $('#box p') //
id选择器（指定id元素） 将 id="divOne" 的元素背景色设置为红色。...，等同于next()方法） $('#divTwo + ul').css('color', 'red'); 下面的代码，只有 id 为 divTwo 元素的下一个兄弟元素 ul 会变色，这里是序列1-*...', 'blue'); // 奇数行颜色 偶数行行颜色为红色（第一行的索引为0），奇数为蓝色 <!...:contains("兄弟1-1")').css('color', 'red'); :empty（取不包含子元素或文本为空的元素） $('#divTwo span:...） jQuery至1.3.2之后的:hidden选择器仅匹配 display:none 或 的元素，而不匹配 visibility: hidden 或 opacity
后代选择器 A B 子元素选择器 A>B 相邻兄弟选择器 A+B 通用兄弟选择器 A~B 相邻兄弟选择器 A+B 你应该很熟悉，选择紧跟在 A 之后的元素 B，但是通用兄弟选择器 A~B 呢？...A[attr*=val] 属性值中包含了val； A[attr~=val] 属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个val词。 以下包含了相对应的每个例子： ?...A[attr*=val] 无论使用何种协议或子域，都可以匹配到含有 mysite 域名的元素。 最后 A[attr~=val] 它非常适合匹配由空格分隔的属性值，因为它只匹配整个单词而不是单词片段。...其中 n 是从零开始，然后 n 为1，再 n 为2，依此类推匹配所有符合表达式的元素。 结构选择器中使用参数来做匹配的选择器如下： :nth-child() 正序匹配某个元素的一个或多个子元素。...::marker 匹配列表项目标记符号（即 元素由 type 属性生成出的标记符号）。 ::placeholder 匹配表单元素中的占位符文本。
; } [attr^=value] 选择存在 attr 属性且属性值中以 value 值开头的元素 a[title^="a"] { /** 选择存在title属性且属性值以a为开头的元素**.../ color: red; } [attr$=value] 选择存在 attr 属性且属性值中以 value 值结尾的元素 a[title$="a"] { /** 选择存在title属性且属性值以...a为结尾的元素**/ color: red; } [attr~=value] 选择存在 attr 属性，且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value 的元素 a[class...属性，且属性值为“value”或是以“value-”为前缀的元素 a[class|="a"] { /** 选择存在class属性，且属性值为“a”或是以“a-”为前缀的元素**/ color:...如下面的例子，p:nth-of-type(2)会先把所有的 p 标签排序，而不是把 p 标签的兄弟元素进行排序，所以变红的就是 p-2 <!
这个想法就是统计选中的 input 的数量，为偶数（0、2、4等）时红色玩家移动，为奇数时黄色玩家移动。很快我就意识到一般的兄弟选择器不能（也不应该！）按照我想要的方式工作。...尽管我喜欢使用偶数和奇数这样的关键词，但我还是走进了死胡同。:nth-child 选择器 “统计”父类中的子元素，包括所有类型，类、伪类等等。...因此，计数器的值始终是 0 或 1，偶数或奇数。 解决第二个问题需要更多的创造力（read: hack）。如上所述，计数器只能显示在 ::before 和 ::after 伪元素中。...为了兼容所有浏览器，可以将 letter-spacing （以像素为单位）设置的大一些并且将 font-size 设置的小一点（1px），是的，我说的是子像素。...我需要 v + c = w 为真，但这是不可能的，因为 c 和 w 是整数，而 v 是非整数。
第2章 选择器 jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。...（查看jQuery文档） jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。...交集选择器 $(‘div.redClass’); 获取class为redClass的div元素 总结：跟css的选择器用法一模一样。...:odd $(‘li:odd’).css(‘color’, ‘red’); 获取到的li元素中，选择索引号为奇数的元素 :even $(‘li:even’).css(‘color’, ‘red’); 获取到的...li元素中，选择索引号为偶数的元素 2.4 jQuery筛选方法（重点） 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
