QPushBuuton { background-color: rgb(0, 255, 255); } 当有多个相同控件，例如按钮需要使用一种样式表的时候，就可以使用类型选择器，我们只需要将按钮放在同一个容器中...QPushButton的实例，但不匹配其子类的实例，这个可以说与类型选择器是一对，就好像后代选择器和子代选择器的关系，这种选择器只会匹配该类的所有对象, 而不会匹配其派生类的对象。...同样，具有伪状态的选择器比未指定伪状态的选择器更具体。...{ color: red } 为了确定规则的特殊性，Qt样式表遵循CSS2规范： 选择器的特异性计算如下： 计算选择器中ID属性的数量（= a） 计算选择器中其他属性和伪类的数量（= b） 计算选择器中元素名称的数量...因此，它具有系统颜色，而不是继承其父QGroupBox的颜色。
jQuery框架，简介，优势，安装，语法，jQuery选择器，id选择器，类选择器，标记选择器，属性选择器，位置选择器，后代选择器，子代选择器，选择器对象，选择器对象遍历，页面初始化，jQuery的dom...就是说它非常请求，大小在30kb左右；具有强大的选择器和dom操作的封装，可靠的事件处理机制，有完善的ajax，jquery将所有的ajax操作封装到函数``$.ajax()`中；具有丰富的插件，完善的文档..."div:first") 匹配所有div中第一个div元素 后代选择器 $("ancestor descendant") 匹配给定的祖先元素的所有后代元素 $("#ul li") 匹配 id 为null...$("[属性名"]) 匹配所有具有指定属性的元素 $("[属性名='值']") 匹配与值相等的元素 $("[属性名!...注意：$(A).before(B)的操作，不是将B插入A前面，而是将A插入B前面 删除HTML元素 删除HTML元素一般使用jquery中的remove()和empty() remove()的作用就是从
css选择器之间的关系 1、父元素： 直接包含其他元素，这个元素就是包含元素的父元素。 2、祖先元素：包含其他元素，这个元素就是包含元素的祖先元素。 3、子元素： 直接被包含的元素。...这个被包含的元素就是包含元素的子元素 4、后代元素： 被包含的元素。 这个被包含的元素就是包含元素的后代元素。...实例 1、相邻选择器 选择器1+选择器2{ } 2、后代选择器 选择器1 选择器2{ } 3、子选择器 选择器1>选择器2{ } 相邻选择器... li+li{ color:springgreen; } 后代选择器 div span{ font-size: 40px; } 子选择器...span div的子代span 以上就是css选择器之间的关系介绍
属性等于first的input元素 后代选择器 后代选择器 .one .two 两个选择器使用空格隔开，表示可以获取当前元素的子代以及孙子代等等后代元素。...子代选择器 .one>.two 两个选择器使用>隔开，表示只能获取当前选中元素的子代元素。...之后所有子代选择器 .one~.two 两个选择器使用~隔开，表示可以获取当前元素之后的所有兄弟元素，只有所有兄弟元素要能符合.two。...获取所有已选择到的元素中具有属性attrKey的元素 selector[attrKey=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为...([selector]) 获得集合中每个匹配元素的祖先元素 事件: on() 在选定的元素上绑定一个或多个事件处理函数。
:first-of-type选择同一元素名称的兄弟中的第一个元素。 :last-child选择同父代的最后一个子代元素。 :last-of-type选择同一元素名称的兄弟中的最后一个元素。...:nth-child()选择同父代的第n个子代元素。 :nth-last-child()选择同父代的倒数第n个子代元素。 :nth-last-of-type()选择同父代的倒数第n个子代元素。...:nth-of-type()选择同父代的第n个子代元素。 :only-child选择只有一个子代的元素。 :only-of-type()选择所有没有同名元素的兄弟元素。...按钮 $(":file") //所有文件域 :button选择所有按钮元素和按钮类型的元素。...:reset选择所有清除按钮（复位按钮）的元素。 :selected选择所有选中的元素。 :submit选择所有提交类型的元素。 :text选择所有文本输入框的元素。
css后代选择器的介绍 说明 1、后代选择器又称为包含选择器，可以选择作为某元素后代的元素。 2、从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代。...即选中后代，不管是儿子还是孙子，只要是都会被选中，为后代选择器。... c的子代 c的后代 ... c的兄弟 以上就是css后代选择器的介绍，希望对大家有所帮助。
2.后代选择器，子代选择器，next，siblings描述？...:contains :empty :has :parent 匹配包含给定文本的元素 匹配所有不包含子元素或者文本的空元素 匹配含有选择器所匹配的元素的元素 匹配含有子元素或者文本的元素 5.可见性选择器...*= value] 匹配有包含某些值的特定元素 [selector1][selector2] 同时满足多个条件使用 $("div[id]"); <div...匹配所有复选框 :submit 匹配所有提交按钮 :image 匹配所有图像 :reset 匹配所有重置按钮 :button 匹配所有按钮 :file 匹配所有文本域 :hidden 匹配所有不可见元素...children(); 获取子元素 find(); 用于查找表达式 next(); 获取下一个元素 nextAll(); 获取下一个所有元素 parent(); 获取父元素 parents(); 获取所有匹配元素的祖先元素的集合
) :选择包含指定文本的元素 file :选择所有文件上传输入框 :button :选择所有的按钮 :checkbox :选择所有的复选框 :hidden :选择隐藏的元素...red") 选择第一个img元素 JQuery对象的方法 context 选择元素时使用的上下文对象 $("img:odd").context.TagName; each(function.../选择子代拥有img属性src带有astor的div.dcell元素 var s=$("[for*=astor]"); $("div.dcell").has(s).css("border","thick...元素 parentsUntil 选择祖先元素，知道找到这个当前祖先元素匹配参数选择器为止,parentsUntil(selector),parentsUntil(selector,selector)...closest 得到结果集中元素的祖先元素中匹配selector选择器最接近的那个祖先元素，形式为closest(selector),closest(selctor,context),closest
第2章 选择器 jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。...; 获取同一类标签的所有元素 并集选择器 $(‘div,p,li’); 使用逗号分隔，只要符合条件之一就可。...console.log( $(':checked') ); 2.2 jQuery层级选择器（重点） 名称 用法 描述 子代选择器 $(‘ul > li’); 使用-号，获取儿子层级的元素...，注意，并不会获取孙子层级的元素 后代选择器 $(‘ul li’); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 跟CSS的选择器一模一样。...console.log( $('#hobby').children() ); //获取 hobby 最近的祖先元素 console.log( $('#hobby').closest
它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”； css是用来调节标签样式的 那为什么需要学选择器呢?...div的后代 p是div的儿子也是div后代 是span的父亲 div是p的父亲是span的爷爷 也可以说是他们的祖先 */ 后代选择器 特征符号是空格 /*查找div内部所有的后代span*/ div...，那么使用分组和嵌套可以减少代码的冗余； 匹配标签之间用逗号隔开，标签与标签是或的关系； 并列写可以标签和标签、标签和选择器、意思就是可以多个相同选择器或多个不同选择器都可以并列使用； /*并列的情况...例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。...a[title] { } 标签属性选择器 伪类选择器 p:first-child { } 伪类 伪元素选择器 p::first-line { } 伪元素 后代选择器 article p 后代运算符 子代选择器
有没有更好的方法？ 幸运的是，如果我们使用“事件委托”模式的话，侦听多个元素上的事件只需要一个事件侦听器。 事件委托使用事件传播机制的细节。想要要了解事件委托的工作原理，应该先了解什么是事件传播。...点击事件的传播分三个阶段： 捕获阶段 —— 从window，document 和根元素开始，事件向下扩散至目标元素的祖先 目标阶段 —— 事件在用户单击的元素上触发 冒泡阶段——最后，事件冒泡通过目标元素的祖先...使用事件委托需要 3 个步骤： 步骤 1：确定要监视事件的元素的父级元素 在上面的例子中， 是按钮的父元素。...该事件侦听器也会对按钮单击做出反应，因为按钮单击事件冒泡通过祖先元素（由于事件传播）。 步骤 3：用 event.target 选择目标元素 单击按钮时，将会用event 对象参数调用处理函数。...使用事件委托需要三个步骤： 确定要监视事件的元素的父级元素 把将事件侦听器附加到父元素 用 event.target 选择目标元素 ---- 作者：Dmitri Pavlutin 翻译：疯狂的技术宅
" 的 元素 和 元素 2.层级选择器(跟CSS选择器用法一模一样): 名称 用法(示例) 描述 子代选择器...$("ul>li") 使用>号,获取儿子层级的元素,注意:并不会获取孙子层的元素 后代选择器 $("ul li") 使用空格,代表后代选择器,获取ul下的所有的...parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()....您也可以使用可选参数来过滤对祖先元素的搜索,示例:$("span").parents("ul"); 返回所有元素的所有祖先,并且它是元素....具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop() 注意: 1.1类比attr操作的css操作: jQuery通过
color: green; } 7.后代选择器 后代选择器，用单个空格（ ）字符组合两个选择器，匹配第祖先元素中所有的对应元素。...子代选择器 子代选择器，用单个大于号（>）组合两个选择器，只会在直接子元素中进行匹配。...> 9.兄弟选择器 兄弟选择器，使用（~）组合两个选择器。...，使用（+）组合两个选择器。...，伪元素选择器的权重相当于元素选择器的权重； 子代，后代和兄弟有可能是元素选择器、类选择器、id选择器，因此要根据具体情况来具体分析。
下面是 :focus-within 的一些关键点和与 :focus 的区别： :focus-within 选择器： 选择包含有焦点元素的祖先元素。...当用户在页面上的某个元素上聚焦（例如，输入框或按钮），并且该元素是其祖先元素（例如，一个表单或一个包含该输入框的 div）内的子元素时，祖先元素将匹配 :focus-within。...通常用于创建包含输入框的表单的外观，以在用户输入时改变整个表单的样式或行为。 :focus 选择器： 选择当前具有焦点的元素。...，输入框自身会具有蓝色边框（使用 :focus 选择器），同时包含有焦点输入框的容器 .container 也会变为灰色背景（使用 :focus-within 选择器）。...总之，:focus-within 选择器用于选择包含有焦点元素的祖先元素，而 :focus 选择器用于样式化具有焦点的元素本身。这两个选择器可以一起使用，以创建更丰富的交互体验。
所以即使需求变动了，分页组件该有按钮还是要有按钮的，DOM构造发生变动，至多也就不同元素的增删减，模块内名称也随之增删减，而不会出现修改名字的情况，也就不会因为名字变动，牵涉到JS文件的修改，或样式文件的修改...组件应该是“自洽的”，其本身就应该构成了一个“生态圈”，也就是说，他几乎不需要外部供给，自给自足就能够运转下去。 7. 关于子选择器 子代选择器的方式是，通过组件的根节点的名称来选取子代元素。...BEM禁止使用子代选择器，以上是原因之一。子代选择器不好的地方还在于，如果层次关系过长，逻辑不清晰，非常不利于维护。...这样的样式文件只会越写越糟糕，可以说，当我们用子代选择器来定位元素时，这个样式文件就已经注定是要被翻来覆去的重构的了，甚至，每个来维护这个文件的人都会将其重构一遍。...子代选择器还会造成权重过大的问题，当我们要做响应式的时候，某个带样式的元素需要适配不同的屏幕，此时，我们还要不断的确认该元素之前的选择器写法！
属性来获取元素 2、层级选择器（重点） ancetor descendant ：选取祖先元素下的所有后代元素（多级） parent > child ：选择父元素下的所有子元素（一级） prev + ...:empty：获取内容为空的元素 :has(selector) ：获取内容包含指定选择器的元素 :parent ：获取内容不为空的元素（特殊） 5、可见性选择器 :hidden：获取所有隐藏元素 :visible...：获取所有可见元素 6、属性选择器 [attribute]：获取具有指定属性的元素 [attribute=value]：获取属性值等于 value 的元素 [attribute!...:password：选取所有的密码框 :radio ：选取所有的单选按钮 :checkbox：选取所有的复选框 :submit ：获取 submit 提交按钮 :reset：获取 reset 重置按钮...:image：获取 type=’image’的图像域 :button：获取 button 按钮 :file：获取 type=’file’的文件域 :hidden：获取隐藏表单 9、表单对象属性选择器
，div.hamburger 代表按钮中的线段。...有同学应该想到了，可以用 ::before、::after 伪元素。 CSS 为了让代码更简洁，选择使用 Sass 书写样式。 定义变量 首先我们需要定义一些变量，减少重复的参数。...transition 设置动画的过渡时间 ::before、::after 伪元素是相对于 div.hamburger 进行绝对定位（绝对定位的定义是：相对于最近的非 static 定位的祖先元素的进行偏移...而不是 很多同学印象中的相对于 position:relative 的祖先元素进行定位） 激活状态： 当点击按钮后通过 Javascript 给 div.menu 添加 active 的 class，表示按钮进入激活状态...transform: rotate(135deg); } } } 注意点： 隐藏线段 2 不能直接 display:none 或者 visibility: hidden，这样会导致使用伪元素实现的线段
(.body div .hello) -> (.hello, div, .body) 先找到.hello, 再去验证'.hello'有没有祖先叫'div'，再去验证div有没有祖先'.body'...伪元素选择器 ::before{} * 组合选择器 [type=checkbox] + label{} * 否定选择器 :not(.link){} * 通用选择器 *{} 伪元素 常见的有：before...伪元素 不会出现在 html和dom树中。但是 伪元素是真实存在于页面中的元素，可以显示内容 可以设置样式 等等。 伪类 是一个元素的某种状态。...比如 鼠标 停留在 按钮上，该按钮就处于hover的状态 选择器权重 选择器的分类，也为选择器设置权重 带来了便捷。...实际上 选择器的权重 是不能进位的，一个id选择器的权重 是大于 11个类选择器的。如下图所示： ? 选择器权重 - 参考表 '+'选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。
标签一起使用，label标签为input元素定义标注（标记）。...使用该标签后，你点击单选按钮或复选按钮的文本也是可以选中的。 ? CSS CSS的三种引入方式 内联式(行内式) ? 嵌入式 外部式 ? CSS的选择器 标签选择器 ? id选择器 ? ?...class选择器 类选择器可以同时携带多个类 ? ? 后代选择器 ? ? ? 子代选择器 ? ? ? 组合选择器 ? ? 交集选择器 ? ? 伪类选择器 ? ?...第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 继承的样式没有权值。 !important(最高权重) ?...CSS中元素分类 块状元素 ? ? 行内元素 ? ? 行内块元素 ? ? display属性 ? 通常操作是把行内元素属性转换成行内块元素属性，这样就可以设置宽高了。
标签选择器 所有相同的标签名称都会被选取 tagname { ... } 属性选择器 所有具有该属性，不论属性值为何都会被选取 [tag-attribute] { … } 属性值选择器...-- 结果不属于最后一个子节点（查找div下面不是最后一个a的所有元素）后面的选择器也可以使用，均类似。 --> div :not(a:last-child) { ... } <!...选择器存在优先级，优先级高的会覆盖优先级低的样式。 css中，后定义的样式会覆盖之前定义的样式。最近的祖先样式比其他祖先样式优先级高。 优先级为： !...选择器执行效率：id > class > 标签 > 兄弟 > 子代 > 后代 > 通配(全选) > 属性。(由快到慢，选择器三字省略…) class中可以使用多个选择器,使用空格隔开。...也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。 提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
