CSS伪元素的基本使用 上一篇文章介绍了很多个伪类的使用，这篇来说一下伪元素。 伪元素之所以称为“伪”，主要是因为它不是真正网页里的元素，但是标线行为又跟真正网页元素一样，也可以对其使用css操作。...这可以用于在VTT轨道的媒体中使用字幕和其他线索。多使用在视频的文本显示上。...四、::first-letter 修改块级元素的第一行的第一个字母，比如你经常看到故事书中的第一个文字是大写的，就可使用它在页面上做对应的设置 五、::first-line 用在块级元素上的第一行 六、...::selection 应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分） 简单来说就是修改我们用鼠标选中的文字的颜色和背景色 七、::slotted() 用于选定那些被放在 HTML...模板 中的元素，这对于我们现在使用框架而不是再自创标签的用户来说，很少会用到
伪元素 ::before，::after 1. 空元素(不能包含内容的元素)不支持 ::before，::after IE 不支持的元素有：img，input，select，textarea。...必须设置 content 属性 若不设置，则伪元素不会显示。如果不想设置 content 的内容，可以将内容设置为空。...如果 content 的值是该元素的某个属性于常量组合而成的，常量仍然要用单引号或双引号括起来,之间不需要加号。如：content: '('attr(title)')';。感觉这种写法好违法直觉。...若 content 的属性值不遵循如上要求，则伪元素不会显示。 4. content 的属性值中如何设置特殊字符？...对内容的开头是符号，或者第一个是英文字母或数字，第二个是符号的，使用 ::first-letter 来设置样式时，会对第一个字母和符号都生效。好违反直觉。
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力，做出一些脑洞大开的图形。...预备知识 伪元素 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。...伪类 用来表示无法在CSS中轻松或者可靠检测到的某个元素的状态或属性，比如a标签的hover表示鼠标经过的样式，visited表示访问过的链接的样式，更多的用来描述元素状态变化时的样式，伪类主要有： :...伪类和伪元素可以实现很多强大的视觉效果，这里我主要介绍伪元素，如果对伪类或其他css特性感兴趣，可以看看我之前的css文章，写的很全面。...原理 我们实现如上css图标是基于伪元素的，可以利用伪元素的::before和::after和content属性来为元素添加额外视觉效果，我们在上文中也介绍了伪元素的概念和类型，接下来让我们来实现它吧～
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout <div class=...缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 建议：不推荐使用，只建议高度固定的布局时使用 <div class...，无法显示要溢出的元素 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏...建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用 Left...:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 缺点：内部宽高超过父级div时，会出现滚动条。
可以使用$.parser.parse();这个方法进行处理； 例如： $.parser.parse(); 表示对整个页面重新渲染，渲染完就可以看到easyui原来的样式了； var targetObj...input name='mydate' class='easyui-datebox'>").appendTo("#id"); $.parser.parse(targetObj); 表示重新渲染某个特定的组件
简单伪类选择器 伪类选择器 说明 :not(selector) 选择除了某个选择器之外的所有元素 :first或first() 选择某元素的第一个元素 :last或last() 选择某元素的最后一个元素...odd").css("background-color", "#bbbbff"); 子元素伪类选择器 子元素伪类选择器就是选择某一个元素下面的子元素的方式，在jQuery中，子元素伪类选择器分为两大类...属性操作 jQuery提供css()方法，用来获取或设置匹配的元素的一个或多个样式属性。...元素的显示与隐藏 使用hide()方法 使用hide()方法可以隐藏被选元素 $(document).ready(function () { $(".ex .hide...元素的淡入与淡出 使用hide()与show()方法 show和hide方法可以接受参数控制隐藏的过程.: show(speed,callback) speed参数规定显示或隐藏的速度: - slow
接着，我们会创建一个 :hover 伪类，当用户鼠标移动道元素上时，它将设置 opacity 为 1。 此外，你可以包含自定义的样式。...当 :checked 返回 true 的情况时，我们使用 transform 属性更改状态。 你可以使用这种方法实现各种目标。比如，当用户点点击指定的复选框时候，切花到隐藏其内容。...使用关键帧实现手风琴下拉效果 JavaScript 库，比如 jQuery, Cash 等，即使你想使用一个简单的缩放功能，你都要整个引入。幸运的是，很多 CSS 技巧能够避免这种引入。...使用 first-letter 实现首字母大写 在 CSS 中，可以选择确定的 first-of-type 元素。在这个例子中，我们使用 ::first-letter 伪类去实现首字母大写的效果。...代码片段 最重要的一点，这些 CSS 技巧凸显了不使用 JavaScript 来实现功能的潜力。你可以使用上面这些小技巧，应用在你的设计上。事实上，很多这样的例子可以混合使用，以创作自由风格的设计。
从某种意义上说，它与Flexbox或CSS Grid的工作原理类似，即您需要一个容器元素，在该容器元素上设置scrolln-snap-type和多个为其设置了scroll-snap-align的子元素，...动画 曾经某个时期，大多数开发者使用 JavaScript(或者jQuery) 给浏览器中的元素添加动画。...他们需要更好的工具去开发复杂的动画序列并获得最好的性能。JavaScript(或者jQuery) 并不能够做到。浏览器日渐成熟的同时也开始提供了一些解决方案。最被广泛接受的方案是使用 CSS 动画。...:required 伪类指定具有required 属性的表单元素 :valid 伪类指定一个通过匹配正确的所要求的表单元素 :invalid 伪类指定一个不匹配指定要求的表单元素 [屏幕录制2021... menu在正常态下是隐藏的： .menu{ display: none; } 而当导航hover时显示： ```js /*使用相邻选择器和hover
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 HTML5声明 HTML网页代码结构 <!...就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。...2 颜色(Color) 属性 属性 描述 CSS color-profile 允许使用源的颜色配置文件的默认以外的规范 3 opacity 设置一个元素的透明度级别 3 rendering-intent...设置元素的上外边距 1 尺寸(Dimension) 属性 属性 描述 CSS height 设置元素的高度 1 max-height 设置元素的最大高度 2 max-width 设置元素的最大宽度...2 overflow 规定当内容溢出元素框时发生的事情 2 position 规定元素的定位类型 2 right 设置定位元素右外边距边界与其包含块右边界之间的偏移 2 top 设置定位元素的上外边距边界与其包含块上边界之间的偏移
cursor 属性 - 设置鼠标指针悬停在元素上的样式 描述: 此属性设置光标的类型（如果有），即在鼠标指针悬停在元素上时显示相应样式。...语法参数: :link CSS 伪类表示尚未被访问的元素，匹配每个具有 href 属性的未访问的 或 元素，注意 :visited 伪类和 :link 伪类是互斥的 :link...:hover CSS 伪类在用户使用指针设备与元素进行交互时匹配，通常情况下，用户将光标（鼠标指针）悬停在元素上时触发。...:focus CSS 伪类表示获得焦点的元素（如表单输）, 即当用户点击或轻触一个元素或使用键盘的 Tab 键选择单表以及链接时，它会被触发。...温馨提示: 由 ::before 和::after 生成的伪元素包含在元素格式框内，因此不能应用在替换元素上，比如 或 元素 语法参数: /* CSS3 语法 */ element
jQuery对象的本质是: 利用$DOM对象包装后产生的对象(伪数组形式存储) 打印box的jQuery对象: 注意: jQuery对象只能使用jQuery方法,DOM对象则使用原生的JavaScript...但是很奇怪吧,我们的jQuery对象是一个伪数组,为什么它能同时给四个box设置背景颜色呢?...隐式迭代(重要) 遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代 简单理解: 给匹配到的所有元素进行遍历循环,执行相应的方法,而不用我们再去循环,简化我们的操作,方便我们调用....筛选选择器 :first :even 注意这个和CSS的是不一样的,jQuery的是建立在索引号的基础上的偶数 :eq(index) jQuery筛选方法(重要) parent...狠狠爱了 链式编程 链式编程是为了节省代码量,看起来更优雅 比如我们之前的代码: 我们可以把他简化成这样: jQuery样式操作 操作CSS方法 jQuery可以使用CSS方法来修改简单元素样式
图像文本环绕 CSS 中的 shape-outside 属性是一个非常有用且强大的工具，它允许设计师和开发者控制内容如何围绕一个浮动元素（通常是图像或图形）进行排列。...: 使用元素的边距盒、边框盒、填充盒或内容盒作为参考盒。...一些使用场景包括能够比较两张不同的照片，而无需在视口中渲染这些照片。例如，可以使用光标属性来节省设计中的空间。由于你可以将自定义光标锁定到特定的 div元素上，所以它不会干扰到元素之外的其他元素。...纯CSS的清单 正如我在文章开头提到的，CSS正在稳步发展。而这个动态清单的演示就是一个很好的例证。 它的工作方式是我们将复选框输入类型与 :checked 伪类一起使用。...并使用 transform 属性在 :checked 规范返回真值时更改状态。 使用这种方法可以实现各种各样的目标。例如，当用户点击特定的复选框时，切换隐藏的内容。
html 示例如下： Hide 纯 Javascript/jQuery 实现 使用 Javascript 或者 使用 jQuery...首先，当目标 element 有 on 这个 Class 时，使用 :after 伪元素，给原 element 覆盖上一个新的文本。...纯 CSS 实现 （最近几篇 blog 好像都喜欢给出 纯 CSS 实现哈） 其实，在前端开发中，我们经常使用 :hover 等伪类，通过 CSS 来实现用户鼠标悬浮到某一元素上时，元素样式的修改。...我们可以通过 CSS 配置一个 :checked 伪类的规则。 但是隐藏的 checkbox 也是不可点击的，这里就需要使用 label 标签。...在通过 :checked 和 :after 两个伪类伪元素，在 checkbox 选择上后，绘制一个 "Hide" 元素，覆盖住原有文本。
建议使用:root方法。 3.CSS3 结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。...用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用:empty选择器来控制。...8.CSS3 结构性伪类选择器—nth-child(n) :nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。...经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。...14.CSS3选择器 ::before和::after ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和”content”配合使用，使用的场景最多的就是清除浮动。
CSS，即层叠样式表，是一种用于样式和格式化网页的强大语言。当你深入研究CSS时，你可能会遇到在CSS选择器中使用冒号（ : ）和双冒号（ :: ）的情况。...在CSS中，伪类允许我们根据在HTML结构中没有明确定义的条件或状态来选择和样式化元素。...这些条件可以包括用户交互，比如悬停在一个元素上或点击一个链接，甚至可以是存储在浏览器中的信息，比如已访问的链接。 使用伪类，我们使用冒号（ : ）符号将其附加到CSS选择器的末尾。...伪类 :hover 表示鼠标光标位于元素上方的状态。 另一个常用的伪类是 :visited 。它允许我们为用户访问过的链接设置样式。...要探索CSS中可用的伪类的全部范围，你可以参考MDN上的详尽文档。 伪元素（ :: ） 既然我们已经了解了伪类，那么现在让我们把注意力转向伪元素，它们在CSS选择器中用双冒号（ :: ）表示。
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识，关注我微信公众号：全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 鼠标光标属性...（通常是一个问号或一个气球） text 此光标指示文本。...wait 此光标指示程序正忙（通常是一只表或沙漏 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。...3.第三种方式 父容器使用伪类after和zoom。 伪类选择器还没讲过，争取这两天写一份详细的选择器文章。...，元素前后没有换行符*/ display: inline; } 所谓非占位隐藏就是说，使用这个属性后，这个元素是不会被渲染，也就不会被看到。
伪元素 概念：使用CSS模拟标签，创建网页中不重要的图 用法：找父级，在父级中添加子标签 伪元素 作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...默认是行内元素 2. content必须添加，即便是空。否则伪元素不生效。 3. 伪元素在网页中无法通过鼠标直接复制粘贴。...一、链接伪类选择器： :hover 鼠标悬停状态 :visited 鼠标点过之后状态 :link 初始状态 :active 鼠标点击时的状态 例如： 二、焦点伪类选择器： 常用于form表单：...作用：鼠标定位时的状态 input:focus{ background-color: pink; } 三、结构伪类选择器： 作用：通过结构找到目标标签或者文本 匹配父元素中的第...五、显示隐藏 元素本身隐藏 让某元素本身在屏幕中不可见。
1.2.5. jQuery 对象和 DOM 对象 使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是...$(this).css(“color”,”red”); $(this).siblings(). css(“color”,””); 隐式迭代 // 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代...方法1: 操作 css 方法 jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。 ...停止动画排队的方法为：stop() ; stop() 方法用于停止动画或效果。 stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。 ...总结: 每次使用动画之前，先调用 stop() ,在调用动画。 1.5.6. 事件切换 jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。
什么是伪元素 伪元素用于向某些选择器设置特殊效果。 已存在元素是指DOM中存在的，伪元素则是虚拟的一种，样式也是给这个虚拟的元素使用的。...比如伪元素 :before和:after，用于在css渲染中向元素的头部或尾部插入内容，它们不受文档约束，也不影响文档本身，只影响最终样式。...:after：在元素之后添加内容。 ::placeholder：匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。（只支持双冒号的形式）。...::selection：CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。（只支持双冒号的形式）。 ...但是伪元素的内容只存在于CSS渲染树中，并不存在于真实的DOM中。所以为了seo优化，最好不要在伪元素中包含与文档相关的内容。 修改伪元素的样式，建议使用通过更换class来修改样式的方法。
: 0;: 将元素的透明度设置为 0, 以此来达到隐藏元素的效果，会占位，能够响应绑定的监听事件 4. position: absolute;: 使用绝对定位将元素移除了可视区域外，不会占位，以此来实现元素的隐藏...clip-path：clip-path: circle(0); : 使用元素裁切的 方式实现元素隐藏，会占位，不会响应绑定的监听事件 7. transform: scale(0,0): 使用缩放，来实现元素的隐藏...伪元素和伪类的区别和作用？ • 伪类：将某种状态时添加到已有元素上，这个状态是根据用户的行为变化而变化为的。...• 区别： • 伪类操作的对象是文档树种已有的元素或样式 • 伪元素则是创建一个文档树以外的元素或样式 • : 表示伪类 • :: 表示伪元素 • 作用： • 伪类：通过在元素选择器上加入伪类改变元素的状态...在 CSS2.1 中，伪元素都是使用 单冒号 来表示伪元素的，但在 CSS3 规范中，伪元素的语法被修改为使用 双冒号 17. CSS 预处理器/后处理器是什么？为什么要使用他们？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
