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

9 个你不知道 CSS 伪元素

,它允许您所选元素特定部分设置样式,而无需额外 JavaScript 代码。...::selection 伪元素 ::selection 伪元素以用户选择文本部分为目标。它提供了一种样式应用于所选文本并自定义其外观方法。...::first-letter伪元素 ::first-letter 伪元素允许您设置块级元素第一个字母样式您想将特殊格式应用于段落或标题初始字符,它会派上用场。...::placeholder 伪元素 ::placeholder 伪元素允许您在输入字段和文本区域中设置占位文本样式。...例子: input::placeholder { color: #999; font-style: italic; } 在上面的代码中,输入字段中占位文本将以浅灰色和斜体字体样式显示。

21930

jQuery Cheat—Sheet(jQuery学习笔记)

函数接受CSS选择作为参数,充当一个工厂,返回包含页面中对应元素jQuery对象。...jQuery对象选择有三种:标签名、ID、类 可以单独使用,也可以与其他选择组合使用 元素选择jQuery 元素选择器基于元素名选取元素。...混合选择 eg: $('#selected-plays > li') 子元素选择 > 查找IDselected-plays元素元素(>)中所有的列表项 ---- jQuery 事件 什么事件...当鼠标移动到元素,会触发指定第一个函数(mouseenter,); 当鼠标移出这个元素,会触发指定第二个函数(mouseleave)。...fadeTo() 方法中必需opacity 参数淡入淡出效果设置给定不透明度(值介于 0 与 1 之间)。 可选 callback参数该函数完成后所执行函数名称。

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

jquery实现表单验证_jquery验证插件

grp 群组,中至少输入或选择一项 condRequired[string] validate[condRequired[ids]] ids 某个控件不为空,那么该控件也必填项。...后,提示内容插入位置更改为在验证控件之前插入;   此时需要在控件外层再套一个元素,并设置 class=”inputContainer” overflownDIV ” 设置了溢出滚动元素...,格式 jQuery 选择器。...data-validation-placeholder 占位 位置必填控件验证,值不能为空,也不能为占位。...本站提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站立刻删除。

4.3K40

【FE前端学习】第二阶段任务-基础

HTML图像  没有闭合标签,src属性图片地址,alt属性图片不能加载替换文本...,或用于文档布局 HTML元素 内联元素,作为文本容器,可给部分文本设置样式 HTML表单 ......元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型框。fixed元素表现类似于 position 设置 absolute,不过其包含块视窗本身。...HTML 元素选取和操作 text() - 设置或返回所选元素文本内容 html() - 设置或返回所选元素内容(包括 HTML 标记) val() - 设置或返回表单字段值 attr() 方法用于获取属性值...和C语言一样比较运算,多了一个===全等号,值和类型都相等返回true 和C语言一样逻辑运算&&、||、!

5.1K10

JQuery笔记

JQuery语法 (selector).action() 美元符号定义 jQuery 选择(selector)“查询”和“查找” HTML 元素 jQuery action() 执行对元素操作...示例 (this).hide() - 隐藏当前元素("p").hide() - 隐藏所有段落 (".test").hide() - 隐藏所有 class="test" 所有元素 JQuery选择器...,会发生 mouseup 事件 hover() 方法用于模拟光标悬停事件 focus() 元素获得焦点,发生 focus 事件 blur() 元素失去焦点,发生 blur 事件 JQuery 效果...它可以取以下值:"slow"、"fast" 或毫秒 fadeTo() 方法中必需 opacity 参数淡入淡出效果设置给定不透明度(值介于 0 与 1 之间) 可选 callback 参数该函数完成后所执行函数名称...默认 false JQuery HTML 捕获 text() - 设置或返回所选元素文本内容 html() - 设置或返回所选元素内容(包括 HTML 标记) val() - 设置或返回表单字段

6.1K20

Web前端JQuery面试题(二)

:not(selector) 获取除给定选择器外所有元素 first() 或 :first 获取第一个元素 last() 或 :last 获取最后一个元素 内容过滤选择器: :contains(text...text(val): 设置元素文本内容 val(): 获取元素值 val(val): 元素设置值 val().join(","): 获取选中多个选项值,用于获取select中多个选项值...设置元素样式 css(name,value); name 样式名称,value样式值 添加样式 addClass(class) 和 addClass(class0 class1 ...)...(selector) 选择元素替换成指定selector元素 $("dashu").replaceAll("#text"); 包裹节点 wrap(html): 所有选择元素用其他字符串代码包裹起来...wrap(elem): 所有选择元素用其他Dom元素包裹起来 wrap(fn) unwrap() 移除所选元素元素或包裹标记 wrapAll(html),wrapAll(elem) wrapInner

1.9K30

面试题必备-web页面基础

html标签由包围关键词 html标签成对出现 有部分标签没有结束标签,叫单标签, 页面中所有的内容,都是要放在HTML标签中 HTML标签分三部分: 标签名称 标签内容...form表单事件 onblur:元素失去焦点触发 onchange:在元素元素值被改变触发 onfocus:元素获得焦点触发 onreset:表单中重置按钮被点击 onselect:在元素中文本被选中后触发...css代码通常存放在style标签内 css样式选择和声明组成,而声明由属性和值组成 选择{属性:值} 选择,叫选择器 css放置 直接书写在标签style属性中,不建议使用 内联样式表...标签选择器 通配符选择器 属性选择器 后代选择器 一级子元素选择器 id选择器 class选择器 伪类选择选择某个父元素直接子元素 后代选择选择元素所有子孙元素,一级子元素原则器只选择第一级子元素...溢出隐藏overflow 设置对象内容超过其指定高度以及宽度如何显示内容 visible默认值,内容不会被修剪,会呈现在元素框之外 hidden 内容会被修剪,并且其余内容不可见 scroll

2.4K10

全栈之前端 | 2.CSS3基础知识之选择器学习

所有元素斜体,class 中同时包含 important 和 warning 所有元素还有一个银色背景 ....4.属性选择器 描述: 对带有指定属性 HTML 元素设置样式, 可以为拥有指定属性 HTML 元素设置样式,而不仅限于 class 和 id 属性,即属性选择器在为不带有 class 或 id 表单设置样式特别有用...描述: 全局选择器又称通用选择器,由一个星号(*)代指,它选中了文档中所有内容(或者元素所有内容,比如,它紧随在其他元素以及邻代运算之后时候)。...伪类选择一种,它用于选择处于特定状态元素,比如它们这一类型第一个元素,或者当鼠标指针悬浮在元素上面的时候。...语法解释:在后代选择器中,规则左边选择器一端包括两个或多个用空格分隔选择器, 选择器之间空格一种结合(combinator),每个空格结合可以解释“... 在 ... 找到”、“...

19810

又一个布局利器, CSS 伪类 :placeholder-shown

CSS伪类表示任何显示占位文本form元素。...:placeholder-shown CSS 伪类 在 或 元素显示 placeholder text 生效,简单说就是 placeholder 有值生效,如下所示...:placeholder-shown vs :empty :placeholder-shown专门用于确定元素是否显示占位对象,我们主要使用它来检查input 内容是否空(假设所有的input都有一个占位...类似于类选择器(即.form-input)比类型选择器(即input)具有更高权重。 高权限选择始终覆盖低权重设置样式。 所以我们可以这样说:不要使用:empty检查输入元素是否空。...如果检查 input 内容是否空(在没有点位情况下)? 我们检查输入是否唯一方法使用:placeholder-shown。但是如果我们输入元素没有占位会发生什么呢?

1.9K20

灵活使用 console 让 js 调试更简单

常见占位 %o (这是字母o,不是0),它接受对象,%s 接受字符串,%d 表示小数或整数。 ? 另一个有趣 %c,这可能与你所想不太相同,它实际上CSS值占位。...使用%c占位,对应后面的参数必须CSS语句,用来对输出内容进行CSS渲染。常见输出方式有两种:文字样式、图片输出。...console.assert() assert() 与 log() 相同函数,assert()对输入表达式进行断言,只有表达式false输出相应信息到控制台,示例如下: var arr...您试图在类或库中找出哪个实际调用者导致了这个问题,它优势就显现出来了。 例如,可能有 12 个不同组件调用一个服务,但是其中一个组件没有正确地设置依赖项。...你可以使用不同命令来监控其中一些或所有事件: monitorEvents($(‘selector’)) 监视与选择元素关联所有事件,然后在它们被触发将它们打印到控制台。

1.6K10

C1 能力认证——Web基础

ul 无序列表 form 创建HTML表单 button 定义按钮 i 用于表示区分普通文本其他文本,浏览器通常会将其内容显示斜体 现需要设置一个按钮,请填写语义化标签补全代码片段(填写一个标签名即可...~,同级关系,另外相邻选择关键字+,也是同级关系 伪类选择器 伪类 描述 :hover 用于设置鼠标悬停在元素上方样式 :focus 用于设置元素获得焦点样式 :active 用于设置元素被激活...(按下按键、松开按键样式 :link 用于设置元素点击之前样式(仅可用于a标签) :visited 用于设置被访问元素样式(仅可用于a标签) :first-child 用于选取属于其父元素第一个元素...: '*'; } ::placeholder 用于设置表单元素占位文本样式 input::placeholder { color: blue; } 现需要实现首行文本红色,请补全代码片段...important规则 当你在一个样式声明中使用!important规则,这个样式覆盖其他任何声明 !

3.3K40

JQuery选择

(selector).prev() – 返回前面的同胞元素 (selector).prevAll() – 返回匹配元素集合中每个元素之前所有同辈元素,由选择器进行筛选(可选)。...(selector).first() – 匹配元素集合缩减为集合中第一个元素。 (selector).last() – 匹配元素集合缩减为集合中最后一个元素。...(selector).each() 对对象进行迭代,每个元素执行函数 (selector).toArray() 以数组形式返回 jQuery 选择器匹配元素 (selector).text()...– 设置或返回所选元素文本内容 (selector).html() – 设置或返回所选元素内容(包括 HTML 标记) (selector).val() – 设置或返回表单字段值 (selector...() – 对被选元素进行添加/删除类切换操作 (selector).css() – 设置或返回样式属性 jQuery Ajax 操作函数 .ajax() – 执行Ajax异步请求 .get() –

7.4K10

HTML5 与CSS3 相关笔记

:用图像做列表项标记 (3)list-style-position:设置列表项标记位置 (4)list-style:一次设置列表所有属性 (属性值none说明列表无样式) 顺序...如果右浮动,后面的文本流环绕在它左边: 47.clear清除浮动:元素全部浮动了,父级包不住子元素会造成边框塌陷,所以要清除浮动元素对其他元素影响。...(1)网页中元素都含有两个堆叠层级,一个设置绝对定位所处环境,此时z-index0;另一个设置绝对定位所处堆叠环境,此时层位置由z-index值确定。...important要写在分号前面,但注意网页制作者不设置css样式,浏览器会按照自己样式来显示网页。...i:first-child{ } 匹配所有元素第一个元素 p:first-child i{ } 匹配第一个元素所有 元素 White-space属性:设置如何处理元素空白

5.4K30

不得不佩服,美观小巧网页内容编辑器——ContentTools

它被设计: 与框架无关库不使用任何JavaScript框架(没有JQuery),但可以很好地使用它们。 灵活ContentTools软件包由5个库组成,每个库或可以独立使用。...通过属性对话框中最后一个选项卡,可以查看所选元素内部HTML代码并直接对其进行更新。 使用 第一步下载JS,CSS和其他关联项目文件: 下载仓库并打开/ build文件夹,包括预构建源文件。...Woods data-name属性用于在保存标识区域(默认情况下使用id属性),标记可编辑HTML,常见误解单个元素标记为可编辑,例如: <h1 data-editable...当用户从视口底部检查器栏中选择标签,这些标签就会出现。尽管可以样式设置适用于所有标签,但是显示适用于标签类型样式。 ? 我们添加可应用于段落标记单一样式.author。...,并让它知道页面上哪些元素可编辑

2.6K10

前端学习自学笔记:day03

占位(placeholder)用户在文本输入框中预先输入内容。...例:WHO -复习:address元素:定义作者和位置及联系方式标签: name:zhongweijie cite元素:用以定义作品标题。通常显示斜体。...外部样式表:[样式需要被应用到很多页面的时候,外部样式表将是理想选择。使用外部样式表,你就可以 通过更改一个文件来改变整个站点外观。...-复习:link标签:链接外部样式: ] 例: 内部样式表:单个文件需要特别样式,就可以使用内部样式表。你可以在 head 部分通过 标签定义内部 样式表。...例: body p 内联样式特殊样式需要应用到个别元素,就可以使用内联样式。 使用内联样式方法在相关标签中使用样 式属性。样式属性可以包含任何 CSS 属性。

1.9K50

jQuery选择器和选取方法

其中有不少选择器(但不是全部)可以在CSS样式表中使用。选择器语法有三层结构。你肯定已经见过选择器中最简单形式。”#te st”选取id属性”test”元素。”...属性值以val结尾元素 [attr*=val] 匹配attr属性值含有val元素 [attr~=val] 其attr属性解释一个由空格分隔单词列表,匹配其中包含单词val元素。...2、组合选择器 使用特殊操作或“组合”可以简单选择器组合起来,表达文档树中元素之间关系。下表列举了jQuery支持组合选择器。这些组合选择器与CSS3支持组合选择一样。...在调用判断函数,this值当前元素,参数元素序号。...大部分都接受可选选择器字符串作为参数。不传入选择,它们会返回所有元素、兄弟元素或父元素。传入选择,它们会过滤元素集,返回匹配

5.1K40

js如何动态选择和操作 CSS 伪元素,例如 ::before 和 ::after

什么元素元素用于向某些选择设置特殊效果。 已存在元素指DOM中存在,伪元素则是虚拟一种,样式也是给这个虚拟元素使用。...这些添加内容不会出现在DOM中,仅仅是在css渲染层中加入。 它不存在于文档中,所以js无法直接操作它。而jQuery选择器都是基于DOM元素,因此也并不能直接操作伪元素。...哪些元素 :first-letter:向文本第一个字母添加特殊样式。  :first-line: 向文本首行添加特殊样式。  :before:在元素之前添加内容。 ...:after:在元素之后添加内容。  ::placeholder:匹配占位文本,只有元素设置了placeholder属性,该伪元素才能生效。(只支持双冒号形式)。...('red').addClass('green'); 2、使用CSSStyleSheetinsertRule来元素修改样式: // html代码 测试测试</div

5.4K20
领券