css选择器

后代选择器 用空格隔开 选择div标签下的p标签下的a标签 div p a 选择class为parent标签下的p标签下的a标签 .parent p a 后代选择器可以是标签、类、id的混合体 后代选择器会选择所有的复合条件的后代 子代选择器 用>隔开 选择div标签下的p标签下的第一级a标签 div p > a 子代选择器也可以是标签、类、id的混合体 子代选择器是后代选择器的精确版 交集选择器 标签、类、id中间不使用空格隔开，取他们的交集 div.red 选择class为red的div 并集选择器 标签、类、id中间使用逗号隔开，取他们的并集 div,p,.red 选择div、p和class为red的标签 链接链接伪类选择器 伪类选择器是以冒号开头 :link 未访问的链接 :visited 已访问的链接 :hover 鼠标移动到链接上 :active 选定的链接 来源： https://www.cnblogs.com/ivy-blogs/p/11973598.html

一、jQuery简介 1. 特点 1. 兼容所有浏览器 2. 丰富的DOM选择器 3. 链式表达式 4. Ajax操作支持 2. 语法 1. jQuery语法 $(选择器).action(操作) 2. 与JS对比 JS： var pEle = document.getElementsByTagName('p')[0] pEle.style.color = 'red' jQuery： $('p').css('color', 'green') 二、选择器与筛选器 1. 基本选择器 1. 标签选择器 $('span') 2. 类选择器 $('.c1') 3. id选择器 $('#id') 4. 组合选择器 $('#d1, span'); 5. 配合使用 $('div.c1') // 找到有c1 class类的div标签 2. 层级选择器 1. 后代选择器 $('x y'); 2. 儿子选择器 $('x > y') 3. 毗邻选择器 $('x + y') 4. 兄弟选择器 $('x ~ y') 3. 属性选择器 1. 找到含有‘username’属性的标签 $('[username]') 2. 找到含有username属性，且值为‘byx’的标签 $('[username="byx"]') 3. 找到在span标签下，username=byx的标签 $('span[username=

一、jQuery简介 1. 特点 1. 兼容所有浏览器 2. 丰富的DOM选择器 3. 链式表达式 4. Ajax操作支持 2. 语法 1. jQuery语法 $(选择器).action(操作) 2. 与JS对比 JS： var pEle = document.getElementsByTagName('p')[0] pEle.style.color = 'red' jQuery： $('p').css('color', 'green') 二、选择器与筛选器 1. 基本选择器 1. 标签选择器 $('span') 2. 类选择器 $('.c1') 3. id选择器 $('#id') 4. 组合选择器 $('#d1, span'); 5. 配合使用 $('div.c1') // 找到有c1 class类的div标签 2. 层级选择器 1. 后代选择器 $('x y'); 2. 儿子选择器 $('x > y') 3. 毗邻选择器 $('x + y') 4. 兄弟选择器 $('x ~ y') 3. 属性选择器 1. 找到含有‘username’属性的标签 $('[username]') 2. 找到含有username属性，且值为‘byx’的标签 $('[username="byx"]') 3. 找到在span标签下，username=byx的标签 $('span[username=

jQuary 一、jquary对象和dom对象 jquary找到的标签对象成为-- jquary对象 原生js找到的标签对象成为 -- dom对象 dom对象只能使用dom对象的方法,不能使用jquery对象的方法 jquery对象也是,它不能使用dom对象的方法 dom对象和jquery对象互相转换: jquery对象转dom对象 -- jquery对象[0] 示例:$('#d1')[0] dom对象转jquery对象 -- $(dom对象) 二、jquary选择器 1.基本选择器 选择器是使用 jQuery('#d1') -- $('#d1') #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容 id选择器 -- $("#id") 标签选择器 -- $("tagName") --> $('div') class选择器 -- $(".className") -->$('.c1') //里面直接放类值 配合使用 -- $('div.c1') //找到c1 class类的div标签 组合选择器 -- $("#id, .className, tagName") 总结： ​ 选择器可能找到的标签是多个，会放到数组里面

一、CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素，但不只是在 CSS 中，JavaScript 对 CSS 的选择器也是支持的，比如 document.document.querySelectorAll。 二、选择器类型 基本选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 三、基本选择器 选择器 含义 作用 CSS .class 类选择器 匹配 class 包含(不是等于)特定类的元素 1 #id id选择器 匹配特定 id 的元素 1 * 通用元素选择器 匹配页面任何元素（这也就决定了我们很少使用） 2 element 元素选择器 选择HTML元素 1 四、组合选择器 选择器 含义 作用 CSS E,F 多元素选择器 同时匹配元素E或元素F 1 E F 后代选择器 匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F 1 E>F 子元素选择器 匹配E元素的所有直接子元素 2 E+F 直接相邻选择器 匹配E元素之后的相邻的同级元素F 2 E~F 普通相邻选择器（弟弟选择器） 匹配E元素之后的同级元素F（无论直接相邻与否） 3 五、属性选择器 选择器 示例 示例说明 CSS [attribute] [target] 选择所有带有target属性元素 2 [attribute=value] [target=-blank]

定义： CSS选择器就是CSS中已经定义好的用来选中某些原色的固定语法，它的作用就是选中我们想要设置样式的元素。 CSS选择器的分类： 简单选择器分为： 1.标签名选择器：通过具体的HTML名称来选择元素【标签名会将当前网页中所有叫改名字的标签都选中】 2.类名选择器：通过标签的类名来选择元素 3.ID选择器：通过ID名称来选择元素 类名选择器： 1.类名选择器： 一个完整的网页需要很多标签组合在一起编写实现，因为 HTML标签的种类有限，所以同名的一个标签会在一个网页中出现多次，此时如果对这些同名的标签分别设置不相同的样式，那么直接使用标签名选择器无法实现，此时就需要用类名选择器。 2.类名选择器的基本使用步骤： .class类名 定义 HTML网页结构，然后在我们想要选中的元素身上设置class属性，在 我们想要选中的元素们身上设置相同 class属性值，即类名。 ID选择器： 1.ID选择器： 如果只想从一堆元素当中选中其中的某一个元素，那么就可以用 ID选择器，这个ID就和人们的身份证号一样，是唯一的。 2.ID选择器的使用步骤： 在我们想要选中的元素身上设置一个 ID属性，给这个ID属性设置一个值，称为ID名，在style中通过固定的语法来进行调用：#ID名 注意： 要求在一个网页当中不能出现同名的 ID 【虽然有效果，但是不能这样做】 ID名与类名的命名规则： 　

css 的引入方式有三种 : 行类样式、内部样式、外部样式表 一、行内样式 使用 style 样式引入 css 样式。 二、内部样式 在 style 标签中书写 css 代码。 Style 标签写在 head 中。 三、外部样式表 css 代码保存在扩展名为 .css 的样式表中 html 文件引用扩展名为 .css 的样式表、有两种方式 : 链接式、导入式。 链接式与导入式的区别 <link> 1、 属于 XTHML 2、 优先加载 css 文件到页面 @import 1、 属于 css2.1 2、 先加载 HTML 结构在加载 css 文件。 css 三种选择器 一、标签选择器 标签选择器其实就是我们经常说的 html 代码中的标签。例如 :html 、 span 、 p 、 div 、 a 、 img 等。 例 : 二、类选择器 类选择器是 css 代码中最常用的，它通过为元素单独设置 class 来赋予元素样式效果。注意 :1. 类选择器都是使用英文圆点开头，每个元素可以有多个类名。 例 : 三、id 选择器 id 选择器类似于选择符，作用和类选择符相同，但也有一些重要的区别。注意 :1:id 选择器为标签设置 id= ”id 名称 ” ，而不是 class=”类名称” 。 2:id 选择器前面的符号为 # 号。 例 : 来源： https://www.cnblogs

今日内容 jQuery jQuery引入 下载链接：[jQuery官网](https://jquery.com/)，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。 jquery对象和dom对象 jquery找到的标签对象称为 -- jquery对象 原生js找到的标签对象称为 -- dom对象 dom对象只能使用dom对象的方法,不能使用jquery对象的方法 jquery对象也是,它不能使用dom对象的方法 dom对象和jquery对象互相转换: jquery对象转dom对象 -- jquery对象[0] 示例:$('#d1')[0] dom对象转jquery对象 -- $(dom对象) jQuery选择器 基本选择器 jQuery('#d1') -- $('#d1') 基本选择器（同css） 　　 id选择器： $("#id") #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器， //通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容 标签选择器： $("tagName") $('div') class选择器： $(".className") 配合使用： $("div.c1") // 找到有c1

如果父组件style设置了scoped，除了全局样式与子组件内部修改样式以外不受外部样式的影响，但要是父组件想修改子组件某个地方的样式但又不想为了这么一点变动去添加个全局样式该怎么做呢？ 这种情况可以使用带穿透功能的css选择器 >>>，如： <style scoped> .nav >>> .component{ 　　color: #f1f1f1; } >>> .component{ 　　color: #fff; } </style> 与其作用相同的还有深度作用选择器/deep/ <style scoped> .nav /deep/ .component{ 　　color: #f1f1f1; } /deep/ .component{ 　　color: #fff; } </style> 来源： https://www.cnblogs.com/neeter/p/11961527.html

--------- JQ --------- 1.jq 常见选择器？ ，号选择器，分组选择器。空格，祖父选择器。>大于号，父子选择器。+号选择器，紧接下一个兄弟选择器。~号，元素之后所有的 siblings 元素。 ：first，：last，：not，：first-child，:last-child,:animated.：checked 2.jQuery 插件实现方式，分别介绍？ jQuery.fn.extend 封装直接在$下面的方法，就是根下面， 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。 $.extend 用来在 jQuery 命名空间上增加新函数。用一个或多个其他对象来扩展一个对象，返回被扩展的对象 批量的方法用 fn，静态的用$.extend（），不建议用扩展到根下面。 3.bind 和 live 的区别? live 方法其实是 bind 方法的变种，其基本功能就同 bind 方法的功能是一样的，都是为一个元素绑定某个事件，但是 bind 方法只能给当前存在的元素绑定事件，对于事后采用 JS 等方式新生成的元素无效，而 live 方法则正好弥补了 bind 方法的这个缺陷，它可以对后 生成的元素也可以绑定相应的事件。 4.js 和 jq 如何转换？ jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是