CSS 类名是字符串，里面可以包含冒号（:），比如：

如果你使用 Tailwind CSS 框架，在响应式布局相关类名下，会看到不少这种带冒号的类名前缀，比如 sm:, md: 等。

如果你尝试使用 document.querySelectorAll('.sm:pb-10')

前端小伙伴们，在使用css的display的属性的时候是不是经常会迷惑怎么使用，今天就来详细讲解下。

CSS 的 display 属性用于定义元素应如何显示在页面上。它控制元素的布局和行为，是前端开发中非常重要的一个属性。以下是 display 属性的详细用法：

常见的 display 值

JavaScript三种动态改变样式属性

在JavaScript中，有两种方式可以动态地改变样式的属性，一种是使用样式的style属性，另一种是使用样式的className属性。另外，控制元素的显示和隐藏使用display属性。

1.style 属性

设置style属性语法：

HTML元素.style.样式属性="值”；

在JavaScript中使用CSS样式与在HTML中使用CSS稍有不同，由于在JavaScript中“-”表示减号，因此如果样式属性名称中带有“-”号，要省去“-”，并且“-”后的首字母要大写。例如，在页面中有一个id为titles的div，要改变div中的字体颜色为红色，字体大小为25px，代码如下所示:

Vue3 样式绑定: 内联样式与Class属性的数组语法

示例代码：

```vue
<template>
<div>
<!-- 内联样式绑定 -->
<h1 :style="titleStyles">{{ title }}</h1>
<!-- Class属性的数组语法 -->
<button :class="[primaryButton ? 'primary' : 'secondary', { disabled: isDisabled }]">Submit</button>
</div>
</template>
<script>
import { ref, reactive } from 'vue';
export default {
name: 'StyleBinding',
setup() {
const title = ref('Hello Vue3!');
const titleStyles = reactive({
color: 'red',
fontSize: '24px'
});
const primaryButton = ref(true);
const isDisabled = ref(false);
return {
title,
titleStyles,
primaryButton,
isDisabled
};
}
};
</script>
```

在前端开发中，CSS是必不可少的一环。但CSS的属性繁多，容易让人感到头疼。今天，我们就来整理一份CSS速查手册，帮你快速掌握核心属性，提升开发效率。

一、CSS 的书写位置

前言

JS中有类？我们都知道JavaScript是基于原型的语言，并没有内置的类概念。但从ES6开始，JavaScript引入了class关键字作为语法糖，它提供了一种更简洁、更类似于传统面向对象编程的语法来创建对象。

class关键字在语法上类似于许多其他基于类的语言，如Java或C++，但JavaScript的类仍然是基于原型的。