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

前端优秀实践不完全指南

我们可以通过键盘 Tab 键,进行焦点切换,而获焦元素则可以通过元素 :focus 样式,告诉用户当前焦点位置。...而其本身默认样式又不太能被产品或者设计接受,导致了很多人会在焦点元素触发 :focus 时,通过改变 border 颜色或者其他一些方式替代或者直接禁用。...:focus-visible:这个选择器可以有效地根据用户输入方式(鼠标 vs 键盘)展示不同形式焦点。...有了这个,就可以做到,当用户使用鼠标操作可聚焦元素时,不展示 :focus 样式或者让其表现较弱,而当用户使用键盘操作焦点时,利用 :focus-visible,让可获焦元素获得一个较强表现样式。...可以看到,使用鼠标点击时候,触发了元素 :active ,也触发了 :focus,不太美观。但是如果设置了 outline: none 又会使键盘用户体验非常糟糕。

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

前端基础知识整理

常用属性 属性 描述 class 为html元素定义一个或多个名(classname)(名从样式文件引入) id 定义元素唯一id style 规定元素行内样式(inline style)...|=language] [lang|=en] 属性 选择 lang 属性 en- 为开头所有元素 2 :link a:link 选择所有未访问链接 1 :visited a:visited ...选择所有访问过链接 1 :active a:active 选择活动链接 1 :hover a:hover 选择鼠标在链接上面时 1 :focus input:focus 选择具有焦点输入元素...3 :root :root 选择文档元素 3 :empty p:empty 元素 选择每个没有任何子级p元素(包括文本节点) 3 :enabled input:enabled 选择每一个已启用输入元素...3 :disabled input:disabled 选择每一个禁用输入元素 3 :checked input:checked 选择每个选中输入元素 3 :not(selector)

3.2K20

前端优秀实践不完全指南

我们可以通过键盘 Tab 键,进行焦点切换,而获焦元素则可以通过元素 :focus 样式,告诉用户当前焦点位置。...而其本身默认样式又不太能被产品或者设计接受,导致了很多人会在焦点元素触发 :focus 时,通过改变 border 颜色或者其他一些方式替代或者直接禁用。...:focus-visible:这个选择器可以有效地根据用户输入方式(鼠标 vs 键盘)展示不同形式焦点。...有了这个,就可以做到,当用户使用鼠标操作可聚焦元素时,不展示 :focus 样式或者让其表现较弱,而当用户使用键盘操作焦点时,利用 :focus-visible,让可获焦元素获得一个较强表现样式。...可以看到,使用鼠标点击时候,触发了元素 :active ,也触发了 :focus,不太美观。但是如果设置了 outline: none 又会使键盘用户体验非常糟糕。

84620

高级CSS技巧:7个选择器,无限设计可能性

这是一个简单例子:ul li:nth-child(even) { background-color: #f2f2f2;}此代码片段选择ul具有浅灰色背景元素偶数列表项并设置样式。2....:not() 选择器:选择器:not()允许您从 CSS 规则中排除特定元素。当您想要对页面上大多数元素(但不是特定少数元素)进行样式设置时,这非常方便。...这对于隐藏或设置元素样式非常方便,例如空 div 或段落:div:empty { display: none;}在此示例中,空元素将从视图中隐藏。6....这对于具有动态属性值样式元素是有益:a[href^="https://"] { color: #4caf50;}此规则选择所有具有href“https://”开头属性链接并将其样式设置为绿色...:焦点可见选择器:选择:focus-visible器是一个CSS,当元素处于焦点并且用户使用键盘或其他非鼠标输入方法与页面交互时,它以元素为目标。

52840

别忘了前端是靠什么起家

他迟疑了一下:“但是CSS怎么能识别输入框是否聚焦呢?” 我提醒他:“你有没有试过使用选择器?” “?我通常只用选择器。”他回答。 我解释道:“我们可以使用:focus来实现这个效果。...例如,:hover可以用来改变鼠标悬停在链接或按钮上时样式,:focus用于当元素获得焦点时(比如输入框被点击时),而:active则用于元素被激活(通常是被点击)瞬间。...总之,选择器为CSS提供了强大功能,使得开发者能够更细致和动态方式控制网页样式。它们是现代网页设计中不可或缺工具,使得网页能够响应用户交互,同时保持代码整洁和高效。...总之,元素选择器为CSS提供了强大功能,使得开发者能够更细致和动态方式控制网页样式和内容。...例如,可以选择所有设置了target="_blank"属性标签,并为它们应用特定样式提示用户这些链接将在新窗口中打开。

5910

针对CSS说一说|技术点评

, .da { color: blue; } : :active,将样式添加到被激活元素中 :focus,将样式添加到被选中元素中 :hover,当光标悬浮在页面对象上方时,向页面对象添加样式...:link,将样式添加到未被访问过链接中 :visited,将样式添加到被访问过链接中 :first-child,将特殊样式添加到页面对象第一个子元素中 :lang,允许设计者定义指定页面中所使用语言...CSS3新特性 有在属性选择符中引入通配符,灵活选择符nth-child()等。 属性选择符 E[attr],选择具有attr属性E元素。...E E:nth-of-type(n),匹配同类型中第N个同级兄弟元素E E:nth-last-of-type(n),匹配同类型中倒数第n个同级兄弟元素E CSS结构选择符 E:link,设置超链接...a在未被访问前样式 E:visited,设置超链接a在其链接地址已被访问过时样式 E:hover,设置元素在光标悬停时样式 E:active,设置元素在被用户激活时样式 E:foucs,设置元素在成为输入焦点样式

1.2K20

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

前言  过去零零星星地了解和使用:link、::after和content等元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为部分整理。...选择器实质上是让设计师可以根据元素特定状态,设置不同视觉效果。...HTMLAnchorElement4大经典 :link,用于设置链接初始状态时样式; :visited,用于设置链接被点击过后样式; :hover,用于设置鼠标悬停在链接上方时,链接样式;...想必各位都和我一样,最初接触到就是上述4个了吧?!而且还死机硬背它们设置顺序(LVAH)吧,哈哈。 设置当前目标元素样式  还记得URL中井号吗?...document.hasFocus :: Void -> Boolean 设置元素获得焦点时,该元素样式 :focus-within,用于设置当子元素处于focus状态时,该元素样式

1K20

大胆尝试这些新CSS属性,释放CSS力量吧(一)

:where 是一个 CSS 选择器,它与 :is 选择器类似,可以用于选择满足括号内任何选择器元素。它语法也与 :is 相似,但有一个重要区别::where 不会影响优先级。...当子元素处于焦点状态时,可以使用 :focus-within 选择器来为父元素设置样式,比如表单字段周围容器。...通常用于创建包含输入表单外观,在用户输入时改变整个表单样式或行为。 :focus 选择器: 选择当前具有焦点元素。...通常用于样式化或增强当前拥有焦点元素,例如,更改输入边框颜色或文本区域背景颜色。 不会选择包含有焦点元素元素。...总之,:focus-within 选择器用于选择包含有焦点元素祖先元素,而 :focus 选择器用于样式化具有焦点元素本身。这两个选择器可以一起使用创建更丰富交互体验。

19520

CSS selectors level 4

在这篇文章中,我会根据截至 2019 年 1 月草案规范,和你一起过一遍下一代选择器(第四级),主要有以下分类: 逻辑组合 属性选择器 语言 位置 用户操作伪 输入 树结构 网格结构...在 Codepen 上试试 语言? 这类选择器包括那些使用语言相关设置选择器。 :dir(ltr) 浏览器支持 它选择那些具有从左到右方向性元素,其中文档语言指定如何确定方向性。...:focus-within 浏览器支持 它选择那些与:focus匹配元素(当元素具有焦点时)或具有与:focus匹配元素。...在 Codepen 上试试 :focus-visible 浏览器支持 它选择一个处于焦点状态元素(与:focus匹配),浏览器通常会为了让获得焦点元素清晰可见,给它添加一个焦点环。...在 Codepen 上试试 输入 这类选择包括那些应用于接受用户输入元素选择器。

65520

神奇选择器 :focus-within

大家听多了,元素可能听到不是那么频繁,其实 CSS 对这两个是有区分。...有个错误有必要每次讲到都提一下,有时你会发现元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中一部分要求,目的是为了区分元素,大多数浏览器都支持下面这两种表示方式...选择器 :focus-within 言归正传,今天要说就是:focus-within 选择器。 它表示一个元素获得焦点,或,该元素后代元素获得焦点。划重点,它或它后代获得焦点。...我们无须去给获焦元素设置 :focus ,而是可以给需要元素设置,这样当元素获焦时,我可以一并控制它元素样式 核心思想用 CSS 代码表达出来大概是这样: <div class="g-container...意思大概就是,当 input 类型标签<em>使用</em>了 placeholder 属性有了默认占位<em>的</em>文字,会触发此<em>伪</em><em>类</em><em>样式</em>。

1.1K20

神奇选择器 `:focus-within`

CSS 选择器和元素选择器,让 CSS 有了更为强大功能。 大家听多了,元素可能听到不是那么频繁,其实 CSS 对这两个是有区分。...有个错误有必要每次讲到都提一下,有时你会发现元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中一部分要求,目的是为了区分元素,大多数浏览器都支持下面这两种表示方式...选择器 :focus-within 言归正传,今天要说就是:focus-within 选择器。 它表示一个元素获得焦点,或,该元素后代元素获得焦点。划重点,它或它后代获得焦点。...我们无须去给获焦元素设置 :focus ,而是可以给需要元素设置,这样当元素获焦时,我可以一并控制它元素样式 核心思想用 CSS 代码表达出来大概是这样: <div class="g-container...意思大概就是,当 input 类型标签<em>使用</em>了 placeholder 属性有了默认占位<em>的</em>文字,会触发此<em>伪</em><em>类</em><em>样式</em>。

1.2K50

组件化详细

父组件通过props将数据传递给子组件 父组件App.vue //:title="msg" 表示动态赋予属性 父向子传值步骤 给子组件添加属性方式传值 子组件内部通过props接收 模板中直接使用...状态,添加蒙层 数据请求完毕,关闭loading状态,移除蒙层 实现 准备一个 loading,通过元素定位,设置宽高,实现蒙层 开启关闭 loading状态(添加移除蒙层),本质只需要添加移除即可...给 插槽 上可以 绑定数据,将来 使用组件时可以用 使用步骤 给 slot 标签, 添加属性方式传值 所有添加属性,...并且获取输入焦点 首先, 双击显示输入框, 我们可以通过双点击事件dblclick="handleClick"实现,然后在实现函数中 通过使v-if内容为true, 实现点击显示输入框 获取输入焦点可以有两种方式...$nextTick(()=> {})方式 实现 方式二: 通过在main.js中全局注册, 然后封装全局指令focus,然后就可以直接通过v-focus来进行使用 失去焦点 因为获取焦点,我们是通过v-if

13210

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

通过使用:focus-within,你可以轻松地为包含聚焦子元素元素设置特定样式提升用户体验并增强交互性。...:checked允许你在这些元素被选中时进行样式设置,提供了一致且视觉上令人愉悦用户体验。 通过使用:checked,你可以为复选框和单选框输入在被选中时设置样式。...元素输入占位文本设置样式 通过使用::placeholder元素,你可以为输入框内占位文本设置样式。...这可以用于创建视觉上一致且有吸引力表单,同时为用户提供有帮助指导。 使用::placeholder元素,你可以为输入占位文本设置样式,包括文本颜色、字体样式、对齐方式等。...通过使用::placeholder元素,你可以为输入占位文本设置个性化样式,提升表单外观和用户体验。

16240

《前端5分钟》之使用纯css实现网站换肤和焦点图切换动画

你将收获 •网站换肤设计方案介绍•:target介绍和用法以及如何使用css实现网站换肤•transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 ? 2.焦点图动画 ?...实现思路 1.网站换肤 通常我们实现网站换肤都基于如下方式实现: •方案一: 使用OOCSS模式,通过js动态切换公共名来达到换肤效果•方案二: 点击不同按钮切换不同样式表,如下:•theme-green.css...:target 为了辅助标识那些指向文档特定部分链接目标, CSS3 选择器 引入了 :target . :target 用来指定那些包含片段标识符 URI 目标元素样式。...实现思路也很简单,我们也会基于上面讲:target来实现,这里为了实现动画效果,我们使用了transiton动画,关于transtion和元素更多介绍和使用,可以参考: •css3实战汇总(附源码...)•《css大法》之使用元素实现超实用图标库(附源码) 实现思路如下: 1.建立焦点图和控制点对应关系2.初始化页面时只让第一个焦点图有宽度,其他宽度都设置为零,当控制点激活时,然控制点对应目标对象宽度设置为正常值

4.1K20

css说明以及使用(css事件)

CSS使用(css事件) 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html   之前有开发开发App时候,有同事问我那个列表条目按下去背景会变成淡黄色效果是怎么做... ̄)): 描述 :active 点按,向被激活元素添加样式。 :focus 焦点输入,向拥有键盘输入焦点元素添加样式。 :hover 当鼠标悬浮在元素上方时,向元素添加样式。...:link 链接未访问,向未被访问链接添加样式。 :visited 链接已访问,向已被访问链接添加样式。   要使用这些的话,样式该怎么写呢,。。。以下举个?...看完是不是超级简单,有木有~;这几需要说明几点: A>以上可以只对输入框定义一个获取焦点(:focus)样式,就可以看出效果啦,遂,在开发时候如果不是特别复杂样式效果,切勿轻易动用JavaScript...来控制dom样式   B>大多浏览器对于直接调试带有样式较为麻烦,比如Chrome不同版本可以不会显示dom样式,建议大家先写成普通样式调试成功后再改回dom样式,这样较为nice

1.2K50

css说明以及使用(css事件)

CSS使用(css事件) 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html   之前有开发开发App时候,有同事问我那个列表条目按下去背景会变成淡黄色效果是怎么做... ̄)): 描述 :active 点按,向被激活元素添加样式。 :focus 焦点输入,向拥有键盘输入焦点元素添加样式。 :hover 当鼠标悬浮在元素上方时,向元素添加样式。...:link 链接未访问,向未被访问链接添加样式。 :visited 链接已访问,向已被访问链接添加样式。   要使用这些的话,样式该怎么写呢,。。。以下举个?...看完是不是超级简单,有木有~;这几需要说明几点: A>以上可以只对输入框定义一个获取焦点(:focus)样式,就可以看出效果啦,遂,在开发时候如果不是特别复杂样式效果,切勿轻易动用JavaScript...来控制dom样式   B>大多浏览器对于直接调试带有样式较为麻烦,比如Chrome不同版本可以不会显示dom样式,建议大家先写成普通样式调试成功后再改回dom样式,这样较为nice

1.1K70

《前端技巧复盘》使用纯css实现网站换肤和焦点图切换动画

你将收获 •网站换肤设计方案介绍 •:target介绍和用法以及如何使用css实现网站换肤 •transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 2.焦点图动画 实现思路...1.网站换肤 通常我们实现网站换肤都基于如下方式实现: •方案一: 使用OOCSS模式,通过js动态切换公共名来达到换肤效果 •方案二: 点击不同按钮切换不同样式表,如下: •theme-green.css...:target 为了辅助标识那些指向文档特定部分链接目标, CSS3 选择器 引入了 :target . :target 用来指定那些包含片段标识符 URI 目标元素样式。...实现思路也很简单,我们也会基于上面讲:target来实现,这里为了实现动画效果,我们使用了transiton动画,关于transtion和元素更多介绍和使用,可以参考: •css3实战汇总(附源码...) •《css大法》之使用元素实现超实用图标库(附源码) 实现思路如下: 1.建立焦点图和控制点对应关系2.初始化页面时只让第一个焦点图有宽度,其他宽度都设置为零,当控制点激活时,然控制点对应目标对象宽度设置为正常值

3.8K30

css说明以及使用(css事件)

CSS使用(css事件) 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html   之前有开发开发App时候,有同事问我那个列表条目按下去背景会变成淡黄色效果是怎么做... ̄)): 描述 :active 点按,向被激活元素添加样式。 :focus 焦点输入,向拥有键盘输入焦点元素添加样式。 :hover 当鼠标悬浮在元素上方时,向元素添加样式。...:link 链接未访问,向未被访问链接添加样式。 :visited 链接已访问,向已被访问链接添加样式。   要使用这些的话,样式该怎么写呢,。。。以下举个?...看完是不是超级简单,有木有~;这几需要说明几点: A>以上可以只对输入框定义一个获取焦点(:focus)样式,就可以看出效果啦,遂,在开发时候如果不是特别复杂样式效果,切勿轻易动用JavaScript...来控制dom样式   B>大多浏览器对于直接调试带有样式较为麻烦,比如Chrome不同版本可以不会显示dom样式,建议大家先写成普通样式调试成功后再改回dom样式,这样较为nice

1.2K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券