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

CSS伪与伪元素「建议收藏」

:用于当已有元素处于某个状态时,为其添加对应样式,这个状态根据用户行为而动态变化。比如说,当用户悬停在指定元素时,我们可以通过:hover描述这个元素状态。...虽然它和普通css相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述状态下才能为元素添加样式,所以将其称为伪。 伪元素:用于创建一些不在文档树中元素,并为其添加样式。...比如说,我们可以通过:before在一个元素前增加一些文本,并为这些文本添加样式。 伪分类:状态和结构性伪 状态:是基于元素当前状态进行选择。...在与用户交互过程中元素状态是动态变化,因此该元素根据状态呈现不同样式。当元素处于状态时会呈现该样式,而进入另一状态后,该样式也会失去。...常见状态主要包括: :link 应用于未被访问过链接; :hover 应用于鼠标悬停元素; :active 应用于被激活元素; :visited 应用于被访问过链接

1.5K21

超赞Win10日历悬停效果,爱了爱了(使用HTML、CSS和vanilla JS)

在本文中,我将向您解释我是如何创建自己Windows 10悬停效果日历 本文可能有点复杂,但这是针对初学者,如果您已经精通JS,并且知道Grid悬停逻辑,则可以快速遍历代码以了解发生了什么。...如果基础较差也没关系,建议点赞收藏日后慢慢研究 观察结果 1.毫无疑问, 这里使用了“网格悬停”效果,但是在光标周围每个方向上突出显示了一个以上元素边框,即,元素后面的元素也被突出显示了...2.日期没有按钮悬停效果 3.网格悬停效果不适用于活动日期(今天date)元素。...5.点击日期(非有效日期)只有一个彩色边框 6.活动元素边框被照亮 入门 您可能已经猜到了,我将从网格效果代码开始。 网格前7个元素是星期名称和休息日期。...由于日历一次显示42个日期,因此我在中添加了42个win-btn元素win-grid。一些日期处于活动状态,其中之一处于活动状态,因此我相应地添加。 HTML

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

超链接lvha原则

选择条件有两种: 状态元素是否处于某种特定状态,例如用户曾访问过(link/visited),此刻拥有焦点(focus),处于某种语言环境(lang) 结构:元素是否满足某种DOM结构方面的要求,例如身为长子元素...比起伪繁荣大家族,伪元素就显得有些伶仃了,到目前(2017/11/4)为止,CSS3规范中仍然只有4个伪元素(CSS2.1就是4个): 首字母:选择元素包含文本内容首字母(文本内容包含来自子元素...在指定元素内容结尾位置生成一个元素(同上) 伪与伪元素最大区别是要选择目标内容是否存在于DOM,存在就是伪,不存在就属于伪元素。...*/} a:hover {/* 鼠标悬停超链接,鼠标经过超链接时或悬停在超链接上时,这个超链接就处于hover状态 */} a:active {/* 处于激活状态超链接,鼠标在超链接上按下时 */...脚本可以改变元素是否对用户事件做出响应,并且不同设备和UA指向和激活元素方式不同 CSS 2.1没有定义如果一个’:active’或者’:hover’元素父级是不是也处于这种状态 (摘自5.11.3

3.4K30

css篇-面试题6-伪与伪元素区别

: 用来选择那些不能够被普通选择器选择文档之外元素,比如:hover 伪用于当已有元素处于某个状态时,为其添加对应样式,这个状态根据用户行为而动态变化。...比如,当用户悬停在指定元素时,我们可以通过:hover 描述这个元素状态。...虽然它和普通 css 相似,可以为已有的元素添加样式,但是它只有处于 dom树无法描述状态下才能为元素添加样式,所以将其称为伪 常见伪::link,:visited,:hover,:active...:before和 :after 而言,属性 content 是必须设置,它可以为字符串,也可以有其它形式,比如指向一张图片 URL 总结 伪和伪元素都是用来表示文档树以外"元素" 伪和伪元素分别用单冒号...:和双冒号::表示 伪和伪元素区别,最关键点在于如果没有伪元素(或伪),是否需要添加元素才能达到目的,如果是则是伪元素,反之则是伪

1.5K20

那些关于DOM常见Hook封装(二)

判断是否是全屏。 .isEnabled。判断当前环境是否支持全屏。 来看该 hook 封装: 首先是 onChange 事件中,判断是否是全屏,从而触发进入全屏函数或者退出全屏函数。...return; } if (screenfull.isEnabled) { screenfull.exit(); } }; 最后通过 toggleFullscreen,根据当前状态...> { if (state) { exitFullscreen(); } else { enterFullscreen(); } }; useHover 监听 DOM 元素是否有鼠标悬停...由此可以知道当前文档 (即为页面) 是在背后, 或是不可见隐藏标签页,或者 (正在) 预渲染。可用如下: 'visible' : 此时页面内容至少是部分可见....即文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 '锁屏状态' 。 'prerender' : 页面此时正在渲染中,因此是不可见。文档只能从此状态开始,永远不能从其他变为此状态

82620

一篇文章带你了解CSS Pseudo-classes(伪 )

CSS伪选择器根据其他条件匹配组件,而不一定由文档树定义。CSS 伪添加到选择器关键字,指定要选择元素特殊状态。 一、什么是伪?...CSS伪允许设置元素动态状态样式,例如悬停活动状态和焦点状态,以及文档树中现有但不能通过使用其他选择器作为目标的元素,而无需添加任何选择器它们ID或。 例如,针对第一个或最后一个子元素。...这些伪更改了响应用户操作呈现链接方式。 : hover 当可被用于在用户将鼠标悬停在按钮时改变按钮颜色用。 : active 当元素被激活或单击时适用。...,而没有向元素添加任何ID或。... : lang伪 语言伪:lang允许根据特定标记语言设置构造选择器。 :lang以下示例中为明确赋予语言元素定义了引号no。 例 <!

2K10

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

第一个AngularJS程序要注意地方:  1、HTML里面没有Class或者ID标记在哪里添加事件监听器 2、当HelloController把message设置成Hello World时,我们没有必要注册任何事件监听或者编写任何回调函数...要注意$scope中是否存在该模型,如果有则会初始化数据。 2.4、ng-change ng-change属性指定一个控制器方法,变化时触发 当用户改变输入时计算给出表达式。...2.9、ng-class与ng-style 指定样式与行内样式。 ngClass指令允许你动态设置HTML元素CSS,通过绑定到一个包含添加所有表达式。 ...这个指令不会添加重复,如果这个已经存在的话。 当表达式改变时,以前添加会被移除,并且只会添加之后新产生。 ngStyle指令允许你在HTML元素上条件化设置CSS样式。...4.4、删除 移除最后一个元素并返回该元素 arrayObj.pop(); 移除最前一个元素并返回该元素,数组中元素自动前移 arrayObj.shift();  删除从指定位置deletePos开始指定数量

12.6K30

前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

$scope中有isChecked与没有isChecked区别 ngModel 会尝试使用表达式计算结果绑定到当前域属性...ngClass指令允许你动态设置HTML元素CSS,通过绑定到一个包含添加所有表达式。 ...这个指令不会添加重复,如果这个已经存在的话。 当表达式改变时,以前添加会被移除,并且只会添加之后新产生。 ngStyle指令允许你在HTML元素上条件化设置CSS样式。...[itemN ]]]]); 将一个或多个新元素插入到数组指定位置,插入位置元素自动后移,返回被删除元素数组,deleteCount要删除元素个数 arrayObj.splice(insertPos...("被删除:"+len+"——"+array31); 运行结果: 4.4、删除 移除最后一个元素并返回该元素 arrayObj.pop(); 移除最前一个元素并返回该元素,数组中元素自动前移 arrayObj.shift

15.3K100

CSS中和伪元素

定义 伪 CSS 伪添加到选择器关键字,指定要选择元素特殊状态。 例如,:hover 可被用于在用户将鼠标悬停在按钮时改变按钮颜色。...,而且还允许你根据诸如像导航历史这样外部因素来应用样式(例如 :visited),同样,可以根据内容状态(例如在一些表单元素 :checked),或者鼠标的位置(例如 :hover 让你知道是否鼠标在一个元素悬浮...,我们可以通过给设置第一个 :first-child伪为其添加样式。...这个时候,被修饰 元素依然处于文档树中。...总结 1.伪本质是为了弥补常规CSS选择器不足,以便获取到更多信息; 2.伪元素本质是创建了一个有内容虚拟容器; 3.CSS3中伪和伪元素语法不同; 4.可以同时使用多个伪,而只能同时使用一个伪元素

2.8K10

Angular 中数据绑定

,为 HTML 元素动态添加或者移除 CSS 名,我们分别使用 [class.class-name]="condition" 或 [ngClass]="{ 'class-name': condition...下面是 Angular 中 Interpolation 插绑定和 Property 绑定主要区别: 语法 Interpolation 绑定:插绑定在模板 HTML 内容中,使用{{}}包含表达式或者变量...Property 绑定:用于根据组件属性设置 HTML元素属性,例如给予组件属性 attributes 或者属性 property value,比如 src, href, disabled 等。...你可以用它设定 HTML 元素中 attributes 和 properties 。...两者在 Angular 应用中都很重要,我们根据使用场景选择使用。 事件绑定 事件绑定允许我们将事件(比如按键、点击、悬停、触摸等)绑定到数组中一个方法。它是从视图到组件单向绑定。

14310

如何使用 AngularJS 创建出色动画效果?

AngularJS 中,动画是指在元素显示、隐藏或状态变化时,通过改变属性或样式实现平滑过渡效果。这些过渡效果可以是淡入淡出、滑动、旋转等各种形式。...通过在应用程序中引入该模块,并在元素添加特定动画或指令,我们可以轻松地创建和控制各种动画效果。...第二部分:使用动画2.1 动态添加/移除元素动画在 AngularJS 中,我们可以通过添加/移除 CSS 实现动态添加/移除元素动画效果。...首先,我们需要在 CSS 样式中定义相应过渡效果,然后使用 ng-class 或 ng-show 等指令控制添加/移除。AngularJS 会自动处理变化,从而实现平滑动画过渡效果。...2.2 视图状态变化动画过渡除了动态添加/移除元素动画,AngularJS 还提供了一些指令来处理视图状态变化时动画过渡效果。

18430

CSS伪与伪元素

用于当已有元素处于某个状态时,为其添加对应样式,这个状态根据用户行为而动态变化。比如说,当用户悬停在指定元素时,我们可以通过:hover描述这个元素状态。...虽然它和普通css相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述状态下才能为元素添加样式,所以将其称为伪状态性伪 是基于元素当前状态进行选择。...在与用户交互过程中元素状态是动态变化,因此该元素根据状态呈现不同样式。当元素处于状态时会呈现该样式,而进入另一状态后,该样式也会失去。...常见状态 :link 应用于未被访问过链接 :hover 应用于鼠标悬停元素 :active 应用于被激活元素 :visited 应用于被访问过链接,与:link互斥 :focus 应用于拥有键盘输入焦点元素...比如说,我们可以通过::before在一个元素前增加一些文本,并为这些文本添加样式。 CSS3规范中要求使用单冒号:用于CSS3伪,双冒号::用于 CSS3伪元素,目的是区分伪和伪元素

1.9K20

CSS 基础系列:伪和伪元素

2.伪和伪元素概念 2.1 伪: 伪用于当已有元素处于某个状态时,为其添加对应样式,这个状态根据用户行为而动态变化。...例如,当用户悬停在指定元素时,我们可以通过 :hover 描述这个元素状态。...虽然它和普通 CSS 相似,可以为已有的元素添加样式,但是它只有处于 DOM 树无法描述状态下才能为元素添加样式,所以将其称为伪。...在与用户交互过程中元素状态是动态变化,因此该元素根据状态呈现不同样式。当元素处于状态时会呈现该样式,而进入另一状态后,该样式就会失去。状态顺序很重要,顺序错误可能会导致没有效果。...active 选择正在活动链接 :focus input:focus 选择获得焦点输入框 3.2 结构化伪 结构化伪是 CSS3 新增选择器,利用 DOM 树进行元素过滤,通过文档结构互相关系匹配元素

1.5K10

按钮样式正确方式

CSS组件是一种风格或样式集合,我们可以使用应用,通常在几种不同类型HTML元素之上。 您可能熟悉Bootstrap或Foundation等CSS框架中这个概念。...悬停(hover),焦点(focus)和活动(active)样式 很酷,你按钮看起来不错,但是...用户将与它进行交互,并且当按钮状态改变时,他们需要视觉反馈。...浏览器为“focus”和“active”(即按下)状态设置了默认样式,但通过重置按钮样式我们已经删除了其中一些。 我们还希望为鼠标悬停设置样式,总体而言,我们希望可见样式与我们设计相匹配。...focus-visible.js脚本后,它会为元素添加一个js-focus-visible。...我们可以使用它从没有焦点可见焦点元素中移除焦点样式: /* hide focus style if not from keyboard navigation */ .js-focus-visible

3.6K20

CSS魔法堂:稍稍深入伪选择器

 伪选择器实质是让设计师可以根据元素特定状态,设置不同视觉效果。...HTMLAnchorElement4大经典伪 :link,用于设置链接初始状态样式; :visited,用于设置链接被点击过后样式; :hover,用于设置鼠标悬停在链接上方时,链接样式;...设置元素获得焦点时样式 :focus用于设置元素处于focus状态样式。 兼容性:IE8开始支持。 那么哪些元素支持focus状态呢?那要先弄清楚通过哪些操作可能实现focus。...那么传统支持focus状态元素必定是a、button、input、select和textareas....document.hasFocus :: Void -> Boolean 设置子元素获得焦点时,该元素样式 :focus-within,用于设置当子元素处于focus状态时,该元素样式。

1K20

Angularjs基础(二)

AngularJs通过内置指令为应用添加功能,ng-app 指令初始化一个 AngularJS 应用程序.     AngularJs允许你自定义指令。     ...一个网页可以包含多个运行在不同元素 AngularJS 应用程序。 数据绑定     上面实例中{{firstName}}表达式是一个AngularJS数据绑定表达式。     ...为应用程序数据提供状态(invalid,dirty,touched,error)       为HTML 元素提供CSS       绑定到HTML元素到HTML表单 ng-repeat 指令...你可以使用.directive函数来添加自定义指令。     要调用自定义指令,HTML元素张需添加自定义指令名。     ...实例:         通过添加 restrict 属性,并设置只为 "A", 设置指令只能通过属性方式调用:         var app = angular.module("myApp

3.4K60

加点JavaScript魔法

使用“悬停”模式时,只要你将鼠标指针放在目标元素中,弹出窗口就会保持可见状态。当你移开鼠标时,弹出窗口将消失。这具有糟糕副作用,即如果用户想要将鼠标指针移动到弹出窗口中,弹出窗口将消失。...我需要找出一种方法悬停行为扩展为包含弹出窗口,以便用户可以移动到弹出窗口中,例如,单击那里链接。 在开发基于浏览器应用程序时,事情变得越来越复杂情况,实际并不罕见。...所以我鼠标移出事件处理程序检查是否有一个活动timer对象,如果有,就取消它 07 Ajax 请求 Ajax请求不是一个新话题了,因为我已经在第十四章中已介绍过这个主题,来作为实时语言翻译功能。...elem变量包含悬停事件中目标元素,它是包裹元素元素。...现在剩下就是完善鼠标移出事件处理程序删除弹出窗口逻辑。 如果用户将鼠标移出目标元素,该处理程序已经具有中止弹出操作逻辑。

3.9K10

总结伪和伪元素(转)

下面分别对伪和伪元素进行解释: 伪用于当已有元素处于某个状态时,为其添加对应样式,这个状态根据用户行为而动态变化。...比如说,当用户悬停在指定元素时,我们可以通过:hover描述这个元素状态。...虽然它和普通css相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述状态下才能为元素添加样式,所以将其称为伪。 伪元素用于创建一些不在文档树中元素,并为其添加样式。...下面是根据用途分类总结图和根据冒号分类元素总结图: ? ? 某些伪或伪元素仍然处于试验阶段,在使用前建议先在Can I Use等网站查一查其浏览器兼容性。...处于试验阶段或伪元素会在标题中标注。 伪 状态 由于状态用法大家都十分熟悉,这里就不用例子说明了。

1.4K20
领券