前端记事本
编辑2024-08-08
伪类选择器
:is( ) 选择器,它可以将多个选择器组合在一起,简化代码。
简化代码:减少重复,选择器更简洁。
提高可读性:让样式更容易理解和维护。
//原代码:每种列表类型 (ul 和 ol) 单独编写选择器
ul li a,ol li a {
color:red;
}
//精简代码:is(ul, ol) 匹配 ul 或 ol 元素,这样你只需要写一次 a 选择器,就可以应用相同的样式。
:is(ul,ol) a {
color:red;
}
:where( )选择器,是没有特定权重的选择器。不会影响选择器的优先级(Specificity)。
简化代码:使用 :where() 或 :is() 可以减少重复,写起来更加简洁。
提升可读性:CSS 规则变得更加直观和易于理解。
//原代码:这种写法需要为每个元素类型分别指定样式。
main h1, main h2, main h3 {
color:blue;
}
//精简代码:它类似于 :is() 伪类,但不同之处在于 :where() 是没有特定权重的选择器。
main :where(h1,h2,h3){
color:blue;
}
:not( ) 选择器,用于选择不匹配指定选择器的元素。
“排除”法则::not() 选择器就是一种“排除”的逻辑。它选择某种元素,但不包括那些符合特定条件的元素。
多种条件:你可以在 :not() 内使用任何 CSS 选择器,包括类名、属性选择器、伪类等,以非常灵活地定义排除条件。
示例1:排除某个类
//原代码:
<button>Button 1</button>
<button class="test">Button 2</button>
<button>Button 3</button>
//CSS:除了special类名的button的样式
button:not(.test) {
background-color: blue;
color: white;
}
示例2:排除某个属性
//原代码:
<button>Submit</button>
<button disabled>Disabled Button</button>
<button>Reset</button>
//CSS:给所有按钮应用样式,但不希望给禁用的按钮应用该样式。
button:not([disabled]) {
background-color: green;
color: white;
}
:has( ) 选择器,用于选择包含特定子元素的父元素。
“包含”法则::has() 选择器是一种“包含”逻辑。它选择那些包含特定子元素的父元素。
动态样式::has() 让你可以根据元素内部的情况,动态地对其父元素应用样式。
示例1:为包含图片的div添加样式
//原代码:
<div class="container">
<div class="box">No image here</div>
<div class="box"><img src="image.jpg" alt="An image"></div>
<div class="box">Just text here</div>
</div>
//CSS:所有包含img标签的div背景颜色变为黄色。
.box:has(img) {
background-color: yellow;
}
示例1:为包含特定表单元素的form添加样式
//原代码:
<form class="signup-form">
<input type="text" name="username" placeholder="Username">
</form>
<form class="contact-form">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
</form>
//CSS:所有包含input[type="email"]的表单有一个特殊的边框。
form:has(input[type="email"]) {
border: 2px solid green;
}
前端JS框架
Alpine.js 旨在为静态HTML提供简单的交互功能。
medium-zoom 用于实现图像的放大效果。
Jarallax 允许你在网页上轻松实现背景和内容元素的视差效果。
Pace.js 自动检测网页的资源加载情况,在页面显示一个加载进度条或其他形式的加载动画
- 4
-
分享