1、使用:not()伪类简化你的CSS :not()伪类允许你将样式应用于所有不匹配指定选择器的元素。这是简化你的CSS并避免手动列出元素或应用类来排除某些元素的好方法。...使用:not()伪类可以帮助你简化CSS代码,避免手动列出要排除的元素或添加额外的类。通过使用:not(),你可以直接选择需要应用样式的元素,而无需为要排除的元素指定样式。...需要注意的是,CSS变量在一些旧版本的浏览器中可能不被完全支持,请确保你的目标浏览器支持CSS变量。...:checked伪类允许你在这些元素被选中时进行样式设置,提供了一致且视觉上令人愉悦的用户体验。 通过使用:checked伪类,你可以为复选框和单选框输入在被选中时设置样式。...考虑到有超过500个独特的属性,你会明白为什么很多开发者更喜欢JavaScript的多功能性而回避CSS。不过,和任何与代码相关的事物一样,只有不断练习才能达到完美!
::first-letter和::first-line好像很少用 CSS2中,他俩只能应用在段落之类的块级元素,超链接等行内元素就不能用了 CSS2.1中,:first-letter可以应用所有元素...但是就不能够选中 语言的选择器不常用过就不说了 ::before和::after伪元素选择器要想添加内容,需要使用content属性 p...( ̄_, ̄ ) ##伪类与伪元素## 伪元素选择器写成伪类单冒号的形式没什么问题 但是伪类选择器使用双冒号就不能选择元素了 这里说一下伪类和伪元素的区别 伪类我的理解是元素达到一种状态 状态存在...选择选中的input元素 :not(selector) 否定选择器 :not§ 选择不是p元素的元素 ::selection 高亮文本选择器 ::selection 匹配元素中被用户选中或处于高亮状态的部分...“em” [class~=de]不能选中任何行,因为它class中以空格分隔的属性值中没有“de”的属性值 说到这个属性选择器,我还要多说一点 我在表格中的示例是这么写的 a[src=\.pdf] 是因为
:忽略某些元素不验证 ignore: ".ignore" 4.更改错误信息显示的位置 errorPlacement:Callback Default: 把错误信息放在验证的元素后面 指明错误放置的位置...类名,可以自定义错误提示的样式 errorElement:String Default: "label" 用什么标签标记错误,默认的是label你可以改成em errorContainer:Selector...,maxlength表示最大的选中个数,rangelength:[2,3]表 示选中个数区间 <input type="checkbox" class="checkbox" id="spam_email...$("#myform").validate({ ignore:".ignore" }) rules: 自定义规则,key:value的形式,key是要验证的元素,value...").validate({ focusCleanup:true }) errorClass String 默认:"error" 指定错误提示的css类名,可以自定义错误提示的样式
选择 optimal-select 的原因如下: CSS Selector 相比 xpath 具有更优的性能和可读性. optimal-select 支持选择多个元素 支持配置匹配优先级(priority...(not "${typeof element}")`) } 接下来是最主要的 match 方法,主要是定义在 match.js 中,用来匹配单个元素的 CSS Selector。...Selector 可能不仅仅选中一个元素,这里通过 querySelectorAll 判断是否唯一,这种判断在这个库中多次运用: if (pattern) { // 检查是否唯一。...获取多个元素的 CSS Selector 其实在 select.js 中,有个 getQuerySelector 的方法,会根据传入的值进行不同的方法的调用,假如是传入的是多个 Node 的时候,就会自动调用...,最后拼接成能够获取到多个元素的 CSS Selector 参考资料 [1]点击这里查看详情: https://github.com/fczbkk/css-selector-generator-benchmark
).attr(xxx) :返回被选元素的属性 $(selector).attr(xxxx,xxxx) :设置被选元素的属性和值,第一个参数为被选中的属性,第二个参数为属性值... $(selector).attr(xxx,function(index,value)) :利用函数来设置属性值,要return 返回 5 css() ...3 设置多个CSS属性:$().css({“属性1”:”参数1”,”属性2”:”参数2”,”属性3”:”参数3”}) 6 css类操作 1 addClass() 向被选元素中加入一个或多个类... 2 removeClass() 删除类 3 toggleClass() 增加删除类切换操作 $(selector)...接受选择器的当前坐标 2. position() 方法返回匹配元素相对于父元素的位置(偏移)注:只能获取不能设置 在CSS定位布局中,如果我们对父元素设置position:relative,我们就可以使用
content warning important lf”> div[class~=content]: 能匹配 div[class~=lf]: 能匹配 div[class~=on]: 不能匹配...enabled 匹配每个已启用元素(所有表单控件) 4.2.2、:disabled 匹配每个被禁用元素(所有表单控件) 4.2.3、:checked 匹配每个已被选中的input...元素(适用radio和checkbox) 4.3、结构伪类:从标记的层次结构来匹配元素 4.3.1、:first-child 匹配属于父元素中的首个子元素 4.3.2、:last-child...将匹配的元素排除在外 语法::not(selector); 5、伪元素选择器 5.1、::first-letter 获取匹配元素的第一个字母(字符) 5.2、::first-line 获取匹配元素的首行...5.3、::selection 匹配用户选取的部分 注意:W3C规定所有的伪类选择器全部使用一个冒号,在CSS3中,所有的伪元素选择器,全部使用两个冒号。
$("标签名称");jquery对象的集合,如果选择结果只有一个,那么是当前对象 类选择器 $(".类名"); jQuery对象的集合,类名是在css中定义 并集选择器 $("selector1seletor2...全局选择器 $("*"); jQuery对象的集合,会选中所有 层次选择器(*) 后代选择器 $("selector1 selector2"); 选择selector1内部所有满足selector2的元素...子代选择器 $("selector1>selector2"); 选择selector1中满足selector2选择器的内容,扔掉孙代 相邻元素选择器 $("selector1+selector2");...; 可使用以下方式选中: $("input[type='image']") :file 选中所有文件元素; 等同于: $("input[type='file']") :radio 选中所有单选框元素;...:first-child 匹配所给选择器( :之前的选择器)的第一个子元素; 等同于: :nth-child(1) 注意:但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一 个子元素
:忽略某些元素不验证 ignore: ".ignore" 4.errorPlacement:Callback Default: 把错误信息放在验证的元素后面 指明错误放置的位置,默认情况是...类名,可以自定义错误提示的样式 errorElement:String Default: "label" 用什么标签标记错误,默认的是label你可以改成em errorContainer:Selector...可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大 errorContainer: "#messageBox1, #messageBox2" errorLabelContainer:Selector...类,也可跟一个函数 success: function(label) { // set as text for IE label.html(" ").addClass("checked...,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间 <input type="checkbox" class="checkbox" id="spam_email
class选择器(遍历css类元素) 将class="cube"的元素背景色设为黑色 $(document).ready(function () { $('.cube').css('background...这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素,像visibility:hidden或opactity:0的元素占据了空间,会被排除在外。...).css('text-decoration', 'line-through'); ——4.4 [selector1][selector2](复合型属性过滤器,同时满足多个条件) 将...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素,:last-child表示最后一个子元素。...这里有个问题:如果一个元素没有子元素,:first-child和:last-child会返回null吗?
—— ::before 一般来说是以 :: 双冒号开头的 实际上是支持使用单冒号的,但是我们提倡双冒号这个写法 因为我们可以一眼就看出这个是伪元素选择器,和伪类区分开来 伪元素属于选中一些原本不存在的元素...所以选择器列表不被视为一个完整的选择器(也就是逗号分隔的选择器),因为选择器列表中间是以逗号分隔开的复杂选择器来进行简单选择器计数的。...CSS 伪类 伪类其实是一类非常多的内容的简单选择器。...为什么要这样设计呢?因为一旦我们使用了 layout 相关的属性,比如说我们给 :visited 的尺寸加大一点,它就会影响排班。...逻辑型 :not 伪类 —— 主流浏览器只支持简单选择器的序列(复合选择器)我们是没有办法在里面写复杂选择器的语法的 :where :has —— 在 CSS Level 4 加入了这两个非常强大了逻辑型伪类
jQuery(selector).action(); selector选择器 比 HTML 5 Selector 和 CSS 3 Selector 更强大 action方法 将许多 JavaScript...CSS3/HTML Selector :eq(index) :nth-child(index) :even :nth-child(even) :first :first-child :last :last-child...//判断该 Element 是否存在某个类 CSS操作 $(element).css(propertyName); //取得 CSS Style $(element).css(propertyName...; //所有长辈节点的含有 xxx 类的 $(element).children([selector]); //子节点 $(element).find...$('h1').attr({ 'tabindex': '-1', 'style': 'outline: none;'//不能学习这种写法,应该用css()语义化。
h1 > strong {color:red;} 8、CSS 相邻兄弟选择器 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。...(选中p) 9、伪类选择器 (1)超链接 a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF...{font-weight: bold;} (4) first-of-type css选择器中:first-child与:first-of-type的区别 p:first-child 匹配p元素父元素的第一个子元素...解读:伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。...在CSS3中,伪类与伪元素在语法上也有所区别,伪元素修改为以::开头。但因为历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。
Selector(选择器) 通过查询,发现和Selector相关的规范文档有两份,分别是: Selectors Level 3 Selectors Level 4 其中,Selectors Level...CSS通过选择器将样式的描述属性绑定到文档(document)中的元素上,通过对Selectors Levels 3规范的中的选择器汇总,大概分为以下几类: 通用选择器(类型选择器、class选择器、ID...选中E元素的父元素的第n个同类子元素(同:nth-last-child的区别见番外篇) E:first-child 选中E元素的父元素的第1个同类子元素 E:last-child 选中E元素的父元素的最后一个同类子元素...选中E元素的父元素的唯一子元素(唯一表示”父元素不包含其他子元素“) E:only-of-type 选中E元素的父元素下唯一类型的子元素(唯一类型表示”父元素下不包含其他该类型的元素,可以包含其他类型的元素...元素 E:not(s) 选中的E元素中排除s选择器选中的元素 伪元素选择器 选择器 描述 E::first-line 选中E元素中文本的第一行 E::first-letter 选中E元素中文本的第一个文字或字母
css类元素) 将class="cube"的元素背景色设为黑色 $(document).ready(function () { $('.cube').css('background', '#000')...这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素,像visibility:hidden或opactity:0的元素占据了空间,会被排除在外。...', 'line-through'); ——4.4 [selector1][selector2](复合型属性过滤器,同时满足多个条件) 将title以"jQuery"开始,并且class...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素,:last-child表示最后一个子元素。...这里有个问题:如果一个元素没有子元素,:first-child和:last-child会返回null吗?
1、复杂选择器 1、兄弟选择器 兄弟:平级的元素是兄弟元素 注意:CSS3兄弟选择器只能向后找兄弟,不能向前找兄弟 1、相邻兄弟选择器...1、作用 将满足条件的选择器匹配的元素 排除出去 2、语法 :not(selector){...... } 将满足selector选择器的元素排除出去 ex: 1、在表格中,想匹配除第一行以外的所有行...td:not(:first-child) 4、伪元素选择器 伪类选择器:匹配到的都是完整的元素 伪元素选择器:匹配到的是某元素中内容中的一个部分...仅在支持CSS3浏览器中能被识别 不支持CSS3的浏览器则不能识别 :first-letter :
; form.submit(); } }); }); 使用 ajax 方式 $(".selector").validate({...:忽略某些元素不验证 ignore: ".ignore" 4、更改错误信息显示的位置 errorPlacement:Callback 指明错误放置的位置,默认情况是:error.appendTo(element.parent...参数 类型 描述 默认值 errorClass String 指定错误提示的 css 类名,可以自定义错误提示的样式。..."label" errorContainer Selector 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。...类,也可跟一个函数。
important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性 同一级别 (1) 同一级别中后写的会覆盖先写的样式 (2) 同一级别css引入方式不同...p:first-child 选择属于父元素的第一个子元素的每个 元素 el1~el2 p~ul 选择前面有 元素的每个 元素。...:disabled input:disabled 选择每个禁用的 元素 :checked input:checked 选择每个被选中的 元素。...:not(selector) :not(p) 选择非 元素的每个元素。 ::selection ::selection 选择被用户选取的元素部分。...答:若使用两次,第一影响就是不能通过W3的校验。 在页面显示上,目前的浏览器css还都允许你犯这个错误,用多个相同ID“一般情况下”也能正常显示。
:忽略某些元素不验证 ignore: ".ignore" 4.errorPlacement:Callback Default: 把错误信息放在验证的元素后面 指明错误放置的位置,默认情况是:error.appendTo...类名,可以自定义错误提示的样式 errorElement:String Default: "label" 用什么标签标记错误,默认的是label你可以改成em errorContainer:Selector...可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大 errorContainer: "#messageBox1, #messageBox2" errorLabelContainer:Selector...类,也可跟一个函数 success: function(label) { // set as text for IE label.html(" ").addClass("checked...,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间 <input type="checkbox" class="checkbox" id="spam_email"
使用公式:(“element”) 示例:(“div”) //获取所有div元素 3.类名选择器 类选择器是通过元素拥有的CSS类的名称查找匹配的...在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配类的名称就可以被类选择器选取到。...简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。...使用公式:(“selector1,selector2,……,selectorN”) selector1:一个有效的选择器,可以是ID选择器、元素选择器或类名选择器等...selector2:另一个有效的选择器,可以是ID选择器、元素选择器或类名选择器等 selectorN:(可选择)任意多个选择器,可以是ID选择器、元素选择器或类名选择器等
class:指定标签的类名。CSS操作,把一些特定样式放到一个class类中,需要此样式的标签,可以在添加此类。 2、CSS选择器常见的有几种?...示例: #id-selector{ color: #333; } 类选择器,匹配class包含(不是等于)特定类的元素。...示例: .class-selector{ background: #f1f1f1; } 标签选择器。...|选择器 | 含义 | | -------- |:------------- -----:| | E:first-child | 匹配元素E的第一个子元素 | | E:link |...为什么? a:link: 用来定义超链接被访问前的样式。 a:visited: 用来定义链接被访问后的样式。 a:hover: 用来定义鼠标放到链接上,但鼠标键未被按下时的样式。
领取专属 10元无门槛券
手把手带您无忧上云