选择器分组时, 保持独立的选择器占用一行 声明块的左括号 { 前添加一个空格； 声明块的右括号 } 应单独成行； 声明语句中的 : 后应添加一个空格； 声明语句应以分号 ; 结尾； 一般以逗号分隔的属性值...，每个逗号后应添加一个空格； rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，但逗号后不添加一个空格； 对于属性值或颜色参数，省略小于 1 的小数前面的 0...如果混入的是本身不输出内容的 mixin，需要在 mixin 后添加括号（即使不传参数），以区分这是否是一个 className。...(Element 是 Components 中的元素) 类名尽可能仅有一个单词 多个单词应直接连接 避免标签选择器(性能稍弱,表意不明) Variants(变体) 带有前缀- Positioning...不准用"string".match() 多个参数使用对象字面量存储 jQuery 使用最新版本的jQuery jQuery变量 以$开头, 并缓存到本地变量中复用, 使用驼峰命名法命名 jQuery选择器
「组件嵌套导致的样式竞争问题」 有时候，尤其是在组件中，我们可能不会随机命名样式，而是将一些类型的元素固定为同一个名称，比如 .link，以方便用户在使用我们的组件时覆盖这些样式。...() :where() 「计数」 ID 选择器类选择器 属性选择器 伪类选择器元素(类型)选择器 伪元素选择器= 其中权重最高的选择器= 1 B + 其中权重最高的选择器= 0 「举例」 #root.link...important 如果层中包含嵌套层，则对每一个嵌套层 「优先级」1.11.21.3「样式类型」先声明的嵌套层后声明的嵌套层不在嵌套层中 注意， !...important 是反着来的，和其他层叠权重一样 解决问题 「问题 1：引入组件顺序导致的问题」 因为层中的样式优先级总是更低，因此将 antd 的样式放入 antd 层中即可，无论以何顺序引入都不会覆盖我们不在层中的样式...如果需要限制 CSS 的作用域，还是得添加更具体的样式，如 .card: .card a { /* ... */ } 层叠层中的 CSS 优先级低于不在层中的 CSS 层叠层中的 CSS 优先级更低
你能用 jQuery 代码选择所有在段落内部的超链接吗？（答案略） 这是另一个关于选择器的 jQuery 面试题。就像其他问题那样，只需一行 jQuery 代码就能搞定。...你也还可以看看 用来向DOM中添加元素的 appendTo() 方法. 15. 你如何利用jQuery来向一个元素中添加和移除CSS类?...好吧，除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次....你也还可以看看 用来向DOM中添加元素的 appendTo() 方法. 15. 你如何利用jQuery来向一个元素中添加和移除CSS类?...好吧，除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次.
如： 类名">小虫 当然，一个标签可以属于多个类，不同类之间用空格隔开，且层叠性（优先级）是依据CSS中类的前后而不是标签的类定义前后。...+类名| 即可选择类 如： .fireinsect { font-size:20px } 同理，以此方法使用 “id” 属性来选择叫 id选择器 不过 “id选择器” 需要添加的是...如： #fireinsect { font-size:20px } 高级选择器 在网页制作中，我们常常会遇到各种标签的嵌套的嵌套，此时我们不免就会需要特点标签内引入样式，因而我们就需要高级选择器...后代选择器： 标签内嵌套标签时使用，如： 测试 时我们可以在CSS中以 |”父级”+空格+”子级”| 方式来选择 如： li p { font-size:20px } 交集选择器...与p标签相邻 并集选择器： 如果给不同标签，或者不同类名的标签引入同一样式，可以使用并集选择器 即不同标签之间用 ＂,＂隔开 如： .box,p,h3,.phone{} 选择器的优先级
当你只需要选择一个元素时，使用 ID 选择器，而如果你想要选择一组具有相同 CSS class 的元素，就要用 class 选择器。...你是如何将一个 HTML 元素添加到 DOM 树中的？（答案如下） 你可以用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。...你能用 jQuery 代码选择所有在段落内部的超链接吗？（答案略） 这是另一个关于选择器的 jQuery 面试题。就像其他问题那样，只需一行 jQuery 代码就能搞定。...你也还可以看看 用来向DOM中添加元素的 appendTo() 方法. 15. 你如何利用jQuery来向一个元素中添加和移除CSS类?...好吧，除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次.
比如，您可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果； 通俗理解为：CSS就是为了给HTML标签修改样式； 语法结构 语法结构： 选择器 {...它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”； css是用来调节标签样式的 那为什么需要学选择器呢?...因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 ，我们肯定先需要学习如何查找指定的标签 ---- 选择器列表 如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个...color: greenyellow; } 相邻选择器 特征为+加号，这个查找的是同级别下面紧挨着的第一个span /*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/...: italic; } /* 存在class属性并且属性值包含以空格分隔的"logo"的元素 */ a[class~="logo"] { padding: 2px; } 分组与嵌套 如果存在多个标签需要调整为同一样式
类式继承：本质上还是使用构造函数的prototype，封装成类，典型的例子是jQuery之父John Resig的Simple JavaScript Inheritance，其他类库也有各自的实现...尽量操作元素节点（DOM节点如childNodes, firstChild不区分元素节点和其他类型节点，但大部分情况下只需要访问元素节点引自《高性能JavaScript》）： children...设置HTTP Expires信息 复杂的计算考虑使用Web Worker jQuery性能优化 合理使用选择器 id和标签选择器最快，因为是直接调用原生API $('#box'); // document.getElementById...的浏览器很慢 尽可能优先使用符合CSS语法规范的CSS选择器表达式，以此来避免使用jQuery自定义的选择器表达式，因为当jQuery遇到单个id, 标签名，类名，选择器就会快速调用浏览器支持的DOM方法查询...baz'); $('.foo div.baz'); // better 尽量避免使用通配符选择器 尽可能的少创建jQuery对象 如document.getElementById('el')比$('#el
通配选择器 *{} 其他选择器 伪类选择器、子选择器、临近选择器和属性选择器 那么相应的jQuery也会提供对应的选择器，并增加部分自定义的选择器用于方便操作，主要包括基本选择器、层次选择器、过滤选择器...、表单选择器等4类选择器。...jQuery选择器 示例 基本选择器 #id, .class, element 最基本的id,类,元素选择器 * 匹配所有元素, $("*") selector1,selector2,… 将每一个选择器匹配到元素合并后一起返回...对于jQuery中的事件来说，其均使用事件冒泡机制，而不支持时间捕获机制(可以用原生js)。...事件冒泡就是当页面上有个元素时，其中一个嵌套在另一个中，如果均绑定了click事件，那么触发内层元素的click事件时，会同时触发外部的click事件。
嵌套 选择器嵌套 在 Sass 中，可以在父选择器中写子选择器，以嵌套的形式来表达关联的关系，这样做可以减少我们重复书写父选择器的工作量。...父选择器 & 在 CSS 中，基本选择器分为以下几种： ID 选择器，如 #id 类选择器，如 .class 标签选择器，如 div、p 属性选择器，如 [lang='en'] 伪类选择器，如 a:hover...、div:first-child 伪元素选择器，如 p::before、p::after 其中，伪类和伪元素选择器需要与别的选择器复合使用，以确定是哪些元素的伪类或伪元素。...元素只要满足群组中任何一个选择器，都会使用群组对应的样式进行渲染，如 a, span, label { color: grey; } 在 Sass 中，我们可以使用嵌套的形式来简写群组。...一个元素的样式分散在不同的媒体查询中，维护起来比较麻烦。 在 Sass 中，我们可以在写完一个元素的公共样式之后，直接在下面嵌套媒体查询，所有的响应代码和这个元素都写在同一块地方，维护起来非常方便。
而且经常性考虑需求之外的需求，这样都是不太好，尽量以"需求"的心态去"开发"，而不是以"开发"的心态做"需求",这点要理清~(◕ܫ◕)~ NOW，回到正题==》 内容提要 ---- 选择器(本节) 选择器的扩展方法...(本节) 节点的CSS操作及节点其他操作(本节) Ajax同步与异步(第二节) 事件(第二节) 弹窗(第三节) 参数序列化(第四节) 遍历(第四节) 其他(第四节) ---- 选择器大致分四类: >...[dom中定义的class的值] [标签名称]");或 $("#[dom中定义的ID的值] [标签名称]"); 这四类选择器定义的都是以美元符号$开始后跟着左右括号，括号中的值视不同的选择器而不同,这里不多缀诉...准确的说这是一个符合类型,一般其他教程里面都是叫jQuery对象类型，在这里也顺遂大意叫"jQuery类型"吧，现在来看看这个jQuery对象到底是什么东东： ?...如果是ID选择器，则jQuery对象中没有prevObject这个参数，因为ID本身就是唯一的，例如上面的代码，如果在html中定义了两个ID，jQuery选择器永远只会选择第一个匹配的，如果你只需要在
而且经常性考虑需求之外的需求，这样都是不太好，尽量以"需求"的心态去"开发"，而不是以"开发"的心态做"需求",这点要理清~(◕ܫ◕)~ NOW，回到正题==》 ---- 选择器大致分四类: >>...[dom中定义的class的值] [标签名称]");或 $("#[dom中定义的ID的值] [标签名称]"); 这四类选择器定义的都是以美元符号$开始后跟着左右括号，括号中的值视不同的选择器而不同,这里不多缀诉...准确的说这是一个符合类型,一般其他教程里面都是叫jQuery对象类型，在这里也顺遂大意叫"jQuery类型"吧，现在来看看这个jQuery对象到底是什么东东： ?...如果是ID选择器，则jQuery对象中没有prevObject这个参数，因为ID本身就是唯一的，例如上面的代码，如果在html中定义了两个ID，jQuery选择器永远只会选择第一个匹配的，如果你只需要在...class选择器结果中只取第五个，一般来说有两种写法 A>使用":eq(第几个-1)",例如:$("#bodys p:eq(4)"); B>使用嵌套的写法,例如:$($("#bodys
样式名称选择相似类型的多个元素，如： 2、属性选择器 选择器 1、一般都使用JQuery选择器： 所有Selector (“*”): 选择所有元素....form视图的元素 如: $("h2, div, span").css("background-color", "yellow"); 2、有些设备可能不支持JQuery选择器，则可以使用原生的Javascript...嵌套的另一个问题是变量名和循环。就像你通常以i作为迭代器变量开始第一个循环一样，你将继续使用j,k,l等等。...用户类选择器 使用Java Script选项卡输入JQuery代码。...尽量不要使用HTML选项卡中的代码 检查边界条件，常用边界条件检查数据长度，数据类型，可被0整除等 输入输出使用不同的变量名称 开始于前一行代码的同一行上的左花括号，如 if(myState ===
DOM对象； $只是jQuery的别名形式； 每一个jQuery对象都是一个DOM对象的集合 三、常用选择器 通过jQuery中的选择器实际上取得的是HTML中的DOM元素。...开发出来的方法就是通过使用选择器—基于元素的属性或元素在HTML文档中的位置，简明地表现元素。 例如，选择器：p a 引用所有嵌套于元素之内的超链接(元素)组。...在网页当中，使用class属性引用样式表中的类样式，因为类样式的可重用，所以多个元素可以引用同一个样式。...在jQuery中，可以获取同一类名的多个HTML元素，编写方式同CSS，即在类名的前面加上点号。...语法：$(".className") 本例通过类名来获取元素，因为使用同一个类样式的元素可能有多个，所以通过类名来获取元素返回的将是一个数组对象，即jQuery中的包装集，然后对此包装集中的元素进行相关操作
注意：jQuery选择器返回的是jQuery对象。 jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。...【查看jQuery文档】 jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。...css选择器 jQuery完全兼容css选择器 名称 用法 描述 ID选择器 $(“#id”); 获取指定ID的元素 类选择器 $(“.class”); 获取同一类class的元素 标签选择器 $(“div...”); 获取同一类标签的所有元素 并集选择器 $(“div,p,li”); 使用逗号分隔，只要符合条件之一就可。...”, ”red”); 获取到的li元素中的最后一个 【案例：隔行变色】 筛选选择器(方法) 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
，放弃ID选择器 ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS，就无法重用。...后代选择器命名 约定不以单个字母+"-"为前缀且长度大于等于2的类选择器为后代选择器，如：.item为m-list模块里的每一个项，.text为m-list模块里的文本部分：.m-list .item{...所以，如果你的模块或元件可能嵌套或被嵌套于其他模块或元件，那么要慎用标签选择器，必要时采用类选择器，并注意命名方式，可以采用.m-layer .layerxxx、.m-list2 .list2xxx的形式来降低后代选择器的污染性...选择器顺序 请综合考虑以下顺序依据： 从大到小（以选择器的范围为准） 从低到高（以等级上的高低为准） 从先到后（以结构上的先后为准） 从父到子（以结构上的嵌套为准） 以下仅为简单示范： /* 从大到小....m-xxx .f-xxx{}.m-xxx .s-xxx{} 不要通过模块或其他类来重定义或修改或添加已经定义好的功能类选择器和皮肤类选择器。
写入单独的.css文件中 通过link引入link中 行内式 css 写在标签的style属性中 基础选择器 标签选择器 标签名 {css属性名: 属性值;} 类选择器 .class...通过类名 指定标签的style 一个标签需要多个类名，用空格隔开即可 id 选择器 配合js 诞生，在一个页面中式唯一的，不可替代的 #id {属性名: 属性值} 所有标签上都有id 属性 每一个标签只能有一个...后代选择器: 空格 选择器1 选择器2 {css} 只要是后代，儿子、孙子等都会被选中 子选择器: > 选择器1 > 选择器2 {css} 只选择儿子，不选其他 并集选择器: , 选择器1, 选择器...2 {css} 两者均包括 交集选择器：紧挨着 作用 选中页面中同时满足多个选择器的标签 选择器1.选择器2 {css} 满足既又原则 伪类选择器 hover 当鼠标放置到目标上时，样式改变 任何一个标签都可以写...，但是不能用小范围的元素嵌套大范围元素 如p标签不能嵌套div、p、h a标签内部可以嵌套任意元素，除了a标签 css特性 继承性 子元素没有的 从父元素处继承；子元素有的，不继承 可以理解为 父元素的样式先赋给子元素
结构选择：使得开发者可以选择基于文档树结构的特定元素，如第一个子元素、最后一个子元素、奇数或偶数位置的子元素等。 增强交互性：通过伪类，开发者可以实现更加动态和交互性强的网页效果。...与其他技术的关系和区别 伪类与伪元素（Pseudo-elements）密切相关，但两者有明显区别。伪类用于选择元素的特定状态或特性，而伪元素用于选择元素的一部分内容（如首字母、首行等）。...:not() :not()伪类用于选择不匹配指定选择器的元素。 p:not(.highlight) { color: grey; } 高级伪类 1....减少伪类选择器的嵌套：嵌套选择器会增加匹配复杂度，应尽量减少嵌套层级。 使用高效的伪类：优先使用性能较好的伪类，如:hover、:focus等。...伪类和伪元素有什么区别？ 伪类用于选择元素的特定状态或特性，而伪元素用于选择元素的一部分内容。伪类以冒号（:）开头，伪元素以双冒号（::）开头。 2. 如何在不同浏览器中兼容伪类？
2.1.2 父选择器 & 在嵌套 CSS 规则时，可以用 & 代表嵌套规则外层的父选择器。...2.4.1.1 纯SCSS文件引入注意点 注意： 1、如果一个目录正在被 SCSS 程序监测，目录下的所有scss/sass源文件都会被编译，但通常不希望局部文件被编译，因为局部文件是用来被导入到其他文件的...2、还有就是带（_）文件，在引入时，可以不写（_）,即引入 _test.scss , @import "test" 3、这也就意味着，同一个目录下不能同时出现两个相关名的 SCSS 文件（一个不带...2.6.1 用占位选择器继承 注意：上面的图中 .alert 只是单纯的用于继承，不用做元素类名，但是它却导出成了 类名，这时我们可以用 占位选择器%foo 对其进行声明，不用于元素类名...$color; } 2.16 SCSS 中 @at-root 使用 作用：@at-root 可以使被嵌套的选择器或属性跳出嵌套【例子：比如一段嵌套的样式对应的html有一天需要移动到另一层div
Sass和Less（预处理器） 一、了解Sass和Less 二、Sass和Less 语法 2.1 注释 2.2 语法 赋值 插值 作用域 选择器嵌套、伪类嵌套、属性嵌套（Sass） 运算 函数 混合、命名空间...图片 选择器嵌套、伪类嵌套、属性嵌套（Sass） 在Less和Sass中，可以对标签嵌套，在里面写各个层级写相应的样式，编译完成后，会自动写好对应的选择器。减少复杂的编译选择器代码。...} a{ background: azure; // & 父类元素选择器，添加伪类选择器 &：hover{...样式可以单独显示，也可以在其他的杨使用混入，如果不想选择器编译出来可以在样式后面加一个()，就不会编译出来，可以在括号中进行传参。...作用就是 将需要用的样式编写到一个文件中，其他需要本样式的直接引入，例如清除默认样式 图片
它将根据 styleName 的值在关联的 style 对象中查找对应的 CSS Modules，并为 ReactElement className 属性值添加相匹配的独一无二的 CSS 类名...Compose 组合Class 很多时候我们都需要样式复用，在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为composes 组合。...，只使用 class 名来定义样式 不层叠多个 class，只使用一个 class 把所有样式定义好 不嵌套class 所有样式通过 composes 组合来实现复用 旧项目的兼容 如果对一个元素使用多个...如何在一个 style 文件中使用同名 class ，编译后仍是同名的。...如果在 style 文件中使用了 id 选择器，伪类，标签选择器，所有这些选择器将不被转换，原封不动的出现在编译后的 css 中。即 CSS Modules 只会转换 class 名相关样式。
云服务器
ICP备案
云直播
实时音视频
即时通信 IM
