伪类选择器

: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 自动检测网页的资源加载情况，在页面显示一个加载进度条或其他形式的加载动画