css3选择器 | 易学教程

CSS3选择器归类整理

阅读更多关于 CSS3选择器归类整理

CSS3选择器归类整理（附CSS优先级要点） CSS是用于网页设计可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。在深入研究CSS选择器之前，我们应该先搞懂CSS优先级是如何工作的。比如给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候CSS选择器优先级的问题了。当我们写CSS的时候需要注意有些选择器在级联(cascade)上会高于其它选择器，我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1, 1, 1, 1 或0, 2, 0, 1 第一个数字(a)通常就是0，除非在标签上使用style属性；第二个数字(b)是该选择器上的id的数量的总和；第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；通用选择器(*)是0优先级；如果两个选择器有同样的优先级，在样式表中后面的那个起作用。让我们看几个例子，这样或许比较容易理解些：

jQuery学习笔记(1)—选择器

阅读更多关于 jQuery学习笔记(1)—选择器

一 . jQuery选择器利用jQuery选择器可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器二 . 优点 1.简洁的写法 2.支持CSS1到CSS3选择器 3.完善的处理机制三 . 选择器分类 1.基本选择器基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素 2.层次选择器如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，就可以使用层次选择器 3.过滤选择器过滤选择器主要是通过特定的过滤规则筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(：)开头 1）基本过滤选择器 2）内容过滤选择器 3）可见性过滤选择器 4）属性过滤选择器 5）子元素过滤选择器 6）表单对象属性过滤选择器 4.表单选择器（完）来源： CSDN 作者： aomize 链接： https://blog.csdn.net/aomize/article/details/78417201

jquery学习笔记1——选择器

阅读更多关于 jquery学习笔记1——选择器

一、jq选择器是什么： jq选择器是利用jq的核心函数，快速的选择DOM中的元素。jq选择器完全继承了CSS的风格。利用jq选择器，可以非常快捷和快速的找出特定的DOM元素，然后对他们添加相应的行为，而无需担心浏览器是否支持这一选择器。选择器是jq的根基，在jq中，对事件处理，遍历DOM和Ajax都要依靠jq选择器。二、jq选择器的特点： 1.简介的写法，相对了js原生使用jq选择器能大大的简化我们的代码。 2.支持css1到css3选择器，jq能支持css1，css2的全部和部分css3，同时他还有一些自己独有的选择器。 3.完善的处理机制，在使用jq选择器的使用不用做可行性测试，系统也不会报错。三、jq选择器的分类 1.基本选择器 2.层次选择器 3.过滤选择器 3.1 基本过滤选择器 3.2 内容过滤选择器 3.3 属性过滤出选择器 3.4 子元素过滤选择器 3.5 可见性过滤选择器 3.6 表单对象属性过滤选择器 4.表单选择器来源： CSDN 作者： Gideon丶M 链接： https://blog.csdn.net/mqqqq_1/article/details/51766410

CSS3学习笔记之层次选择器

阅读更多关于 CSS3学习笔记之层次选择器

层次选择器通过HTML的DOM元素之间的层次关系获取元素，其主要的层次关系包括后代，父子，相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。层次选择器语法如下：选择器类型功能描述 E F 后代选择器（包含选择器）选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 E > F 子选择器选择匹配的F元素，且匹配的F元素师所匹配的E元素的子元素 E + F 相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 E ~ F 通用选择器选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 IE7以及以上版本的浏览器包括其他各类浏览器都支持层次选择器。（IE6不支持）下面通过一个HTML文件说明各类层次选择器的使用方式： <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>使用CSS3层次选择器</title> <style type="text/css"> * {margin: 0; padding: 0} body {width: 300px; margin: 0 auto;} div {margin: 5px;padding: 5px;border: 1px solid #ccc;} </style> </head> <body

CSS3学习笔记之结构伪类选择器

阅读更多关于 CSS3学习笔记之结构伪类选择器

结构伪类选择器可以根据DOM树中元素的相对关系来匹配特定的元素，其语法如下：选择器功能描述 E:first-child 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同 E:last-child 作为父元素的最后一个元素的元素E，与E:nth-lat-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+5）,而且n起始值为1不是0 E F:nth-last-child(n) 选择n的倒数第n个子元素。次选择器与E F:nth-child(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:only-child 选择父元素只包含一个子元素

CSS3学习笔记-选择器

阅读更多关于 CSS3学习笔记-选择器

CSS3学习笔记-选择器一、基本选择器通过基本选择器可以确定HTML中大多数DOM元素节点选择器类型功能 * 通配选择器选择文档中的所有HTML元素 E 元素选择器选择指定类型的HTML元素 id ID选择器选择指定ID属性值为”id”的任意类型唯一元素 .class 类选择器选择指定class属性值为”class”的任意类型多个元素二、层次选择器通过HTML的DOM元素进的层次关系获取元素,包括后代父子相邻. 选择器类型功能 E F 后代选择器指定F,选择E元素中的所有F元素 E>F 子选择器指定F,选择E元素的直接子元素中的F元素 E+F 相邻选择器指定F,选择紧跟E元素后面的F元素 E~F 通用选择器指定F,选择E元素后的所有F元素三、属性选择器选择器所指 E[attr] 有属性attr的元素其中可省略E 选择任意类型的attr元素 E[attr=val] 有属性attr且等于val的元素其中可省略E E[attr|=val] 有属性attr且值等于val或以val-开头的元素 <p lang='en-us'> p[lang|=en] E[attr~=val] 有属性attr且以空格隔开的值中有val的元素 <p title='just do it'> p[title~=do] E[attr*=val]

CSS3选择器笔记

阅读更多关于 CSS3选择器笔记

1.属性选择器： [id=test] {…} 选择id=test字符串的元素 [id*=test] {…} 选择id存在test字符串的元素 [id^=test] {…} 选择id 以test字符串开头的元素 [id$=test] {…} 选择id以test结尾的元素 2.伪类选择器、伪元素： p:first-line{…} 选择p元素中第一行的文字元素 p:first-letter{…} 选择p元素中的第一个文字元素 p:before{content:’…’} 选择p元素，在它之前插入一些内容 p:after{content:’…’} 选择p元素，在它之后插入一些内容 3.选择器root、not、empty、和target :root{background: red;} 设置html文档的背景色 :not(p){…} 设置非p元素的背景色 :empty{…} 设置当元素内容为空时指定的样式 :target{…} 设置跳转到target元素的样式 4.选择器first-child、last-child、nth-child、和nth-last-child li:first-child{…} 选择父元素中第一个子元素 li:last-child{…} 选择父元素中最后一个子元素 li:nth-child(2){…} 选择父元素第2个元素 li:nth-child(4n+4){…}

jQuery选择器

阅读更多关于 jQuery选择器

目录选择器 1 基本选择器 2 层级选择器 3 过滤选择器 4 内容选择器 5 可见性选择器 6 属性选择器 7 子元素选择器 8 表单选择器 9 表单对象选择器选择器通过选择器，可以获取到页面元素。jQuery具有强大的选择器，跟CSS3选择器类似 1 基本选择器 #id 根据给定的ID匹配一个元素 element 根据给定的元素标签名匹配所有元素 .class 根据给定的css类名匹配元素。 * 匹配所有元素 selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回 2 层级选择器 ancestor descendant 在给定的祖先元素下匹配所有的后代元素 parent>child 在给定的父元素下匹配所有的子元素 prev+next 匹配所有紧接在 prev 元素后的 next 元素 prev~siblings 匹配 prev 元素之后的所有 siblings 元素 3 过滤选择器 :first 获取第一个元素 :not(selector) 去除所有与给定选择器匹配的元素 :even 匹配所有索引值为偶数的元素，从 0 开始计数 :odd 匹配所有索引值为奇数的元素，从 0 开始计数 :eq(index) 匹配一个给定索引值的元素 :gt(index) 匹配所有大于给定索引值的元素 :lang 选择指定语言的所有元素。1.9

CSS3 :nth-of-type() 选择器

阅读更多关于 CSS3 :nth-of-type() 选择器

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。例子： Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。在这里，我们为奇数和偶数 p 元素指定两种不同的背景色： p:nth-of-type(odd) { background:#ff0000; } p:nth-of-type(even) { background:#0000ff; } 来源： https://blog.csdn.net/qq_43506222/article/details/102721860

Web全栈-属性选择器

阅读更多关于 Web全栈-属性选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器上</title> <style> /* p[id]{ color: red; } */ p[class=cc]{ color: blue; } </style> </head> <body>  <p id="identity1">我是段落1</p> <p id="identity2" class="cc">我是段落2</p> <p class="cc">我是段落3</p> <p id="identity3" class="para">我是段落4</p> <p>我是段落5</p> </body> <

订阅 css3选择器