网站首页 > 技术文章 正文
伪类和伪元素
在开发网页样式中,选择器必不可少,而且选择器也是在开发css中非常重要的内容,包括常用的类选择器,id选择,同时还有伪类,伪类选择器最大的特点就是冒号开头。平时也经常会有小伙伴问到,在使用的时候有伪类,也有伪元素,有些添加单冒号,有些添加双冒号,有没有什么区别?
在网上总结的比较多的一个特点就是,其实在使用的时候,无论是伪类还是伪元素都是可以用单冒号的。但是伪元素可以用双冒号,而伪类只能用单冒号。符合标准而言,单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素。
:focus-within伪类
上面简单讲解一下伪元素选择器和伪类选择器,本文的主角是一个新的伪类选择器::focus-within。
:focus-within选择器其实跟:focus是很相似的,但是也有很大的区别,:focus设置之后,是当前元素触发焦点状态后的样式。而:focus-within,通过名字可以猜到,它是当前元素或者后的元素获取焦点后的样式。
举个例子:
<style>
form{
width: 500px;
min-height: 300px;
padding: 10px;
}
/* 第一种情况 */
input:focus{
outline: solid red;
}
/* 第二种情况 */
form:focus-within{
outline: solid red;
}
</style>
<form action="">
<input type="text" id="txt">
</form>
12345678910111213141516171819
第一种情况是input元素获取焦点的时候触发,让input自身设置outline的样式;第二种情况,当input获取焦点后,form设置outline的样式。
通过这一点我们可以制造出一些常用的交互样式,简化JavaScript的代码。
兼容性
虽然是新选择器,但是兼容性还是挺友好的。
:focus-within 的冒泡性
这个属性有点类似 Javascript 的事件冒泡,从可获焦元素开始一直冒泡到根元素 html,都可以接收触发 :focus-within 事件,在上面的示例中就是如此。
那么它可以有哪些实际应用呢?
感知用户聚焦位置
跟上面示例一样,当用户触发之后,向父级进行传递,我们可以指定用户的聚焦位置,利用这一点,可以设置增加用户体验的交互效果。
举个例子:
<style>
*{
padding: 0;
margin: 0;
border: none;
}
form{
width: 200px;
min-height: 300px;
padding: 10px;
border: 1px solid rgba(204,204,204,1);
margin: 100px auto;
transition: 0.2s;
}
.username,.password{
height: 80px;
margin: 50px 0 ;
}
input{
box-sizing: border-box;
outline: none;
display: block;
width: 100%;
height: 100%;
border: 1px solid rgba(204,204,204,1);
transition: 0.2s;
}
input:focus{
border: 1px solid rgba(55,55,210,1);
}
form:focus-within{
border: 1px solid rgba(55,55,210,1);
box-shadow: 0 0 10px rgba(0,0,0,0.3);
transform: translateY(-4px);
}
</style>
<form action="">
<div class="username">
<input type="text" placeholder="Your name" id="usr">
</div>
<div class="password">
<input type="password" placeholder="Your password" id="pwd">
</div>
</form>
123456789101112131415161718192021222324252627282930313233343536373839404142434445
效果如下图所示:
运用上面思想,我们可以把效果做的更炫一点点,在某些场景制作一些增强用户体验的效果。
也可以实现掘金网登录动效切换,掘金网的登录有一个小彩蛋,最上面的熊猫在你输入帐号密码的时候会有不同的状态。
以上两个效果,大家可以自行尝试进行书写。
本文主要是引出这一个伪元素,大家可以发挥自己的创意,开发出更炫酷的效果。
猜你喜欢
- 2025-06-15 研发Web Components库,深入探究DOM 节点之间的关系
- 2025-06-15 CSS基础(css基础知识)
- 2025-06-15 性能出色,纯CSS实现的loading动画——Loaders.css
- 2025-06-15 零基础学习HTML之CSS篇内联内部外部样式表和类型选择符
- 2025-06-15 CSS 选择器优化::where() 的妙用,让你的代码更优雅!
- 2025-06-15 CSS伪类选择器大全:提升网页交互与样式的神奇工具
- 2025-06-15 JavaScript开发基础——CSS知识(css开发技巧)
- 2025-06-15 JavaScript脚本如何断言select下拉框的元素内容?
- 2025-06-15 前端面试:css选择器有哪些,选择器的权重的优先级
- 2025-06-15 爬虫(6) - 网页数据解析(2) | BeautifulSoup4在爬虫中的使用
- 最近发表
- 标签列表
-
- cmd/c (64)
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- sqlset (64)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)