首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

分享15个有用的,你可能还不知道的CSS小技巧,建议每个前端开发者都了解下

1、使用:not()伪简化你的CSS :not()伪允许你将样式应用于所有不匹配指定选择器的元素。这是简化你的CSS并避免手动列出元素或应用排除某些元素的好方法。...使用:not()伪可以帮助你简化CSS代码,避免手动列出要排除的元素或添加额外的。通过使用:not(),你可以直接选择需要应用样式的元素,而无需为要排除的元素指定样式。...需要注意的是,CSS变量在一些旧版本的浏览器中可能不被完全支持,请确保你的目标浏览器支持CSS变量。...:checked伪允许你在这些元素被选中时进行样式设置,提供了一致且视觉上令人愉悦的用户体验。 通过使用:checked伪,你可以为复选框和单选框输入在被选中时设置样式。...考虑到有超过500个独特的属性,你会明白为什么很多开发者更喜欢JavaScript的多功能性而回避CSS。不过,和任何与代码相关的事物一样,只有不断练习才能达到完美!

15440

CSS3选择器介绍及用法总结

::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] 是因为

1.4K20
您找到你想要的搜索结果了吗?
是的
没有找到

【转】jQuery验证控件jquery.validate.js使用说明+中文API

:忽略某些元素不验证 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名,可以自定义错误提示的样式

4.6K40

【源码】optimal-select 是如何获取到 HTML 元素指纹(CSS Selector

选择 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

1.3K20

Jquery的属性操作和DOM操作

).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,我们就可以使用

1.3K20

CSS3高级选择器用法

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中,所有的伪元素选择器,全部使用两个冒号。

54950

jQuery(选择器)

$("标签名称");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选择器可以匹配多个:即为每个父级元素匹配第一 个子元素

1.5K10

jquery校验规则的使用

:忽略某些元素不验证 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

5K30

css 总结1 原

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中,伪与伪元素在语法上也有所区别,伪元素修改为以::开头。但因为历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。

63430

你了解CSS吗?——rules汇总(上)

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元素中文本的第一个文字或字母

75200

CSS 选择器 — 重学前端

—— ::before 一般来说是以 :: 双冒号开头的 实际上是支持使用单冒号的,但是我们提倡双冒号这个写法 因为我们可以一眼就看出这个是伪元素选择器,和伪区分开来 伪元素属于选中一些原本不存在的元素...所以选择器列表不被视为一个完整的选择器(也就是逗号分隔的选择器),因为选择器列表中间是以逗号分隔开的复杂选择器来进行简单选择器计数的。...CSS其实是一非常多的内容的简单选择器。...为什么要这样设计呢?因为一旦我们使用了 layout 相关的属性,比如说我们给 :visited 的尺寸加大一点,它就会影响排班。...逻辑型 :not 伪 —— 主流浏览器只支持简单选择器的序列(复合选择器)我们是没有办法在里面写复杂选择器的语法的 :where :has —— 在 CSS Level 4 加入了这两个非常强大了逻辑型伪

81041

JQuery学习—JQuery-Validation 使用

:忽略某些元素不验证 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"

4.5K20

CSS选择器及优先级 总结

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“一般情况下”也能正常显示。

49520

CSS 基础系列:伪和伪元素

CSS 引入伪和伪元素的概念是为了格式化文档树以外的信息。也就是说,伪和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。...虽然它和普通的 CSS 相似,可以为已有的元素添加样式,但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式,所以将其称为伪。...结构化伪CSS3 新增选择器,利用 DOM 树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少 class 和 id 属性的定义,使文档结构更简洁。...:first-child和:first-of-type的区别 :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。...然后,在css3中又定义了:first-of-type这个选择器,这个跟:first-child有什么区别呢?

1.5K10
领券