在TypeScript中，类型检查是自动发生的，并且是语言的核心特性之一。当你定义了一个`interface`，TypeScript会在编译时进行类型检查，以确保你遵守了该接口定义的结构。

举个例子来说，假设我们有以下的`interface`：

```typescript
interface IUser {
  name: string;
  age: number;
  isActive: boolean;
}
```

当你尝试创建一个`IUser`类型的对象时，TypeScript编译器会自动检查这个对象是否匹配`IUser`接口。例如：

```typescript
let user: IUser = {
  name: 'Alice',
  age: 30,
  isActive: true
};
```

在这个例子中，`user`对象遵循了`IUser`的结构，因此它会成功编译。但是，如果你尝试添加一个不在`interface`中的属性，或者遗漏了一个属性，TypeScript编译器会抛出一个错误：

```typescript
let user: IUser = {
  name: 'Bob',
  // 'age' 属性丢失将会导致编译错误
  isActive: true
};
```

会产生类似以下的错误：

```
Property 'age' is missing in type '{ name: string; isActive: boolean; }' but required in type 'IUser'.
```

除此以外，你还可以在函数中使用接口来进行类型检查。例如：

```typescript
function greetUser(user: IUser) {
  console.log(`Hello, ${user.name}!`);
}

greetUser({
  name: 'Charlie',
  age: 25,
  isActive: false
}); // 正确使用

greetUser({
  name: 'Dave'
  // 缺少其他属性将导致错误
});
```

对于函数`greetUser`，调用它时传入的参数需要符合`IUser`接口的结构，否则TypeScript编译器会提示错误。

总的来说，在TypeScript中，`interface`类型检查是静态的，发生在编译时，而不是运行时。编译器会根据你定义的接口来检查代码中的结构和类型，确保类型的正确性和一致性。这个特性在大型项目中特别有用，因为它可以在早期就发现潜在的错误和问题。

You can achieve what you want without the `instanceof` keyword as you can write custom type guards now:

    interface A {
        member: string;
    }
    
    function instanceOfA(object: any): object is A {
        return 'member' in object;
    }
    
    var a: any = {member: "foobar"};
    
    if (instanceOfA(a)) {
        alert(a.member);
    }
    

Lots of Members
===============

If you need to check a lot of members to determine whether an object matches your type, you could instead add a discriminator. The below is the most basic example, and requires you to manage your own discriminators... you'd need to get deeper into the patterns to ensure you avoid duplicate discriminators.

    interface A {
        discriminator: 'I-AM-A';
        member: string;
    }
    
    function instanceOfA(object: any): object is A {
        return object.discriminator === 'I-AM-A';
    }
    
    var a: any = {discriminator: 'I-AM-A', member: "foobar"};
    
    if (instanceOfA(a)) {
        alert(a.member);
    }

In TypeScript 1.6, [user-defined type guard](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates) will do the job.

    interface Foo {
        fooProperty: string;
    }
    
    interface Bar {
        barProperty: string;
    }
    
    function isFoo(object: any): object is Foo {
        return 'fooProperty' in object;
    }
    
    let object: Foo | Bar;
    
    if (isFoo(object)) {
        // `object` has type `Foo`.
        object.fooProperty;
    } else {
        // `object` has type `Bar`.
        object.barProperty;
    }
    

And just as Joe Yang mentioned: since TypeScript 2.0, you can even take the advantage of tagged union type.

    interface Foo {
        type: 'foo';
        fooProperty: string;
    }
    
    interface Bar {
        type: 'bar';
        barProperty: number;
    }
    
    let object: Foo | Bar;
    
    // You will see errors if `strictNullChecks` is enabled.
    if (object.type === 'foo') {
        // object has type `Foo`.
        object.fooProperty;
    } else {
        // object has type `Bar`.
        object.barProperty;
    }
    

And it works with `switch` too.

How about User-Defined Type Guards? [https://www.typescriptlang.org/docs/handbook/advanced-types.html](https://www.typescriptlang.org/docs/handbook/advanced-types.html)

    interface Bird {
        fly();
        layEggs();
    }
    
    interface Fish {
        swim();
        layEggs();
    }
    
    function isFish(pet: Fish | Bird): pet is Fish { //magic happens here
        return (<Fish>pet).swim !== undefined;
    }
    
    // Both calls to 'swim' and 'fly' are now okay.
    
    if (isFish(pet)) {
        pet.swim();
    }
    else {
        pet.fly();
    }

typescript 2.0 introduce tagged union

[Typescript 2.0 features](https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript)

    interface Square {
        kind: "square";
        size: number;
    }
    
    interface Rectangle {
        kind: "rectangle";
        width: number;
        height: number;
    }
    
    interface Circle {
        kind: "circle";
        radius: number;
    }
    
    type Shape = Square | Rectangle | Circle;
    
    function area(s: Shape) {
        // In the following switch statement, the type of s is narrowed in each case clause
        // according to the value of the discriminant property, thus allowing the other properties
        // of that variant to be accessed without a type assertion.
        switch (s.kind) {
            case "square": return s.size * s.size;
            case "rectangle": return s.width * s.height;
            case "circle": return Math.PI * s.radius * s.radius;
        }
    }

Type guards in Typescript:
--------------------------

TS has **type guards** for this purpose. They define it in the following manner:

> Some expression that performs a runtime check that guarantees the type in some scope.

This basically means that the TS compiler can narrow down the type to a more specific type when it has sufficient information. For example:

    function foo (arg: number | string) {
        if (typeof arg === 'number') {
            // fine, type number has toFixed method
            arg.toFixed()
        } else {
            // Property 'toFixed' does not exist on type 'string'. Did you mean 'fixed'?
            arg.toFixed()
            // TSC can infer that the type is string because 
            // the possibility of type number is eliminated at the if statement
        }
    }
    

To come back to your question, we can also apply this concept of type guards to objects in order to determine their type. To define a type guard for objects, we need to define a function whose return type is a **type predicate**. For example:

    interface Dog {
        bark: () => void;
    }
    
    // The function isDog is a user defined type guard
    // the return type: 'pet is Dog' is a type predicate, 
    // it determines whether the object is a Dog
    function isDog(pet: object): pet is Dog {
      return (pet as Dog).bark !== undefined;
    }
    
    const dog: any = {bark: () => {console.log('woof')}};
    
    if (isDog(dog)) {
        // TS now knows that objects within this if statement are always type Dog
        // This is because the type guard isDog narrowed down the type to Dog
        dog.bark();
    }

How to check interface type with typescript

在命令行运行 TypeScript 文件需要几个步骤，我将一步一步详细解释这个过程。

### 第1步：安装Node.js

确保您的计算机上安装了Node.js。Node.js是一个JavaScript运行时，可以让您在服务器端运行JavaScript代码。如果您还没有安装Node.js，请前往官网下载并安装：

[Node.js官网](https://nodejs.org/)

### 第2步：安装TypeScript

通过命令行安装TypeScript编译器。使用npm（Node.js的包管理器）全局安装TypeScript可以使 `ts-node`命令在任何位置都可以使用。

```shell
npm install -g typescript
```

### 第3步：安装ts-node

`ts-node`是一个可以执行TypeScript文件并将它们直接在Node.js环境中运行的工具。它会在后台自动地调用TypeScript编译器将TypeScript代码转换成JavaScript代码，并立即执行转换后的代码。

```shell
npm install -g ts-node
```

### 第4步：编写TypeScript代码

在您喜欢的文本编辑器中创建一个新的TypeScript文件，例如 `example.ts`，并写入TypeScript代码。例如：

```typescript
// example.ts
function greet(person: string) {
  return "Hello, " + person + "!";
}

console.log(greet("world")); // 输出: Hello, world!
```

### 第5步：运行TypeScript文件

打开命令行工具，导航到包含 `example.ts`文件的目录，然后使用以下命令运行它：

```shell
ts-node example.ts
```

### 示例输出：

```plain
Hello, world!
```

`ts-node`会自动编译 `example.ts`文件到JavaScript，并在Node.js环境中执行。

以上就是在命令行中运行TypeScript文件的步骤。


> 我如何使用 Typescript 做同样的事情

您可以`tsc`使用以下命令在监视模式下运行`tsc -w -p .`，它将`.js`以实时方式为您生成文件，因此您可以`node foo.js`像平常一样运行

传输流节点
=====

有 ts-node ： https: [//github.com/TypeStrong/ts-node](https://github.com/TypeStrong/ts-node)它将动态编译代码并通过节点运行它 🌹

    npx ts-node src/foo.ts

运行以下命令并全局安装所需的包：

    npm install -g ts-node typescript '@types/node'
    

现在运行以下命令来执行打字稿文件：

    ts-node typescript-file.ts

我们有以下步骤：

1.  首先你需要安装打字稿
    
        npm install -g typescript
        
    
2.  创建一个文件 helloworld.ts
    
        function hello(person){
           return "Hello, " + person;
        }
        let user = "Aamod Tiwari";
        const result = hello(user);
        console.log("Result", result)
        
    
3.  打开命令提示符并键入以下命令
    
        tsc helloworld.ts
        
    
4.  再次运行命令
    
        node helloworld.js
        
    
5.  结果将显示在控制台上

你也可以试试tsx。tsx 是一个用于无缝运行 TypeScript 的 CLI 命令（替代 Node），它基于 esbuild 构建，因此速度非常快。

[https://github.com/esbuild-kit/tsx](https://github.com/esbuild-kit/tsx)

例子：

    npx tsx ./script.ts

要添加到上面的 @Aamod 答案，如果您想使用一个命令行来编译和运行代码，您可以使用以下命令：

视窗：

    tsc main.ts | node main.js
    

Linux / macOS：

    tsc main.ts && node main.js

How to run TypeScript files from command line?

要将 JSON 对象转换为 TypeScript 类，你可以创建一个类，其属性和类型与 JSON 对象的键和值类型相匹配。以下是一个简单的例子，展示了这个过程。

假设我们有如下的 JSON 对象：

```json
{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "isActive": true
}
```

我们可以创建一个 TypeScript 类来表示这个 JSON 对象：

```typescript
class User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;

  constructor(id: number, name: string, email: string, isActive: boolean) {
    this.id = id;
    this.name = name;
    this.email = email;
    this.isActive = isActive;
  }
}
```

为了将 JSON 对象实例化为这个类的实例，我们可以编写一个函数来处理转换：

```typescript
function createUser(json: any): User {
  return new User(json.id, json.name, json.email, json.isActive);
}

// JSON 对象
const json = {
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com",
  "isActive": true
};

// 将 JSON 对象转换为 User 类的实例
const user = createUser(json);
```

下面是一些额外的注意事项：

1. **类型校验**: 在实际应用中，你可能需要验证 JSON 对象包含了所有必需的属性，并且它们的类型是正确的。TypeScript 的类型系统在编译时提供了一些帮助，但运行时你可能需要额外的校验。

2. **可选属性**: 如果 JSON 对象中的某些属性可能不存在，你应该在 TypeScript 类中将这些属性标记为可选。例如：

```typescript
class User {
  id: number;
  name: string;
  email: string;
  isActive?: boolean; // 可选属性

  // 如果 isActive 是可选的，构造函数参数也应相应地标记为可选
  constructor(id: number, name: string, email: string, isActive?: boolean) {
    this.id = id;
    this.name = name;
    this.email = email;
    this.isActive = isActive;
  }
}
```

3. **复杂对象**: 如果你的 JSON 对象包含嵌套的对象或数组，你需要确保对应的 TypeScript 类型也反映了这个结构。

4. **自动化**: 如果你经常需要进行这种转换，可以考虑使用一些自动化工具，如 [quicktype](https://quicktype.io/) 或其他在线转换器，它们可以根据 JSON 输入自动生成 TypeScript 类型定义。

您无法将 Ajax 请求中的普通 JavaScript 结果简单地转换为原型 JavaScript/TypeScript 类实例。有多种技术可以实现这一点，并且通常涉及复制数据。除非您创建该类的实例，否则它不会有任何方法或属性。它将仍然是一个简单的 JavaScript 对象。

虽然如果您只处理数据，则可以只转换为接口（因为它纯粹是编译时结构），但这需要您使用 TypeScript 类，该类使用数据实例并使用该数据执行操作。

复制数据的一些示例：

1.  [将 AJAX JSON 对象复制到现有对象中](https://stackoverflow.com/questions/16373422/copying-ajax-json-object-into-existing-object)
2.  [在 JavaScript 中将 JSON 字符串解析为特定的对象原型](https://stackoverflow.com/questions/5873624/parse-json-string-into-a-particular-object-prototype-in-javascript)

本质上，你只需：

    var d = new MyRichObject();
    d.copyInto(jsonResult);

我遇到了同样的问题，我找到了一个可以完成这项工作的库： https: [//github.com/pleerock/class-transformer](https://github.com/pleerock/class-transformer)。

它的工作原理如下：

    let jsonObject = response.json() as Object;
    let fooInstance = plainToClass(Models.Foo, jsonObject);
    return fooInstance;
    

它支持嵌套的孩子，但你必须装饰你的班级成员。

在 TypeScript 中，您可以使用接口和泛型进行[类型断言，如下所示：](https://basarat.gitbook.io/typescript/type-system/type-assertion#type-assertion-vs-casting)

    var json = Utilities.JSONLoader.loadFromFile("../docs/location_map.json");
    var locations: Array<ILocationMap> = JSON.parse(json).location;
    

其中 ILocationMap 描述了数据的形状。此方法的优点是您的 JSON 可以包含更多属性，但形状满足接口的条件。

但是，这不会添加类实例方法。

如果您使用的是 ES6，请尝试以下操作：

    class Client{
      name: string
    
      displayName(){
        console.log(this.name)
      }
    }
    
    service.getClientFromAPI().then(clientData => {
      
      // Here the client data from API only have the "name" field
      // If we want to use the Client class methods on this data object we need to:
      let clientWithType = Object.assign(new Client(), clientData)
    
      clientWithType.displayName()
    })
    

但遗憾的是，此方法**不适用于嵌套对象**。

我发现一篇关于将 JSON 通用转换为 Typescript 类的非常有趣的文章：

[http://cloudmark.github.io/Json-Mapping/](http://cloudmark.github.io/Json-Mapping/)

您最终得到以下代码：

    let example = {
                    "name": "Mark", 
                    "surname": "Galea", 
                    "age": 30, 
                    "address": {
                      "first-line": "Some where", 
                      "second-line": "Over Here",
                      "city": "In This City"
                    }
                  };
    
    MapUtils.deserialize(Person, example);  // custom class

How do i cast a json object to a typescript class

当我们在React项目中开发用户界面时，我们经常会用到几个核心概念，包括JSX Element、ReactNode和ReactElement。现在我将逐一解释这些概念，并提供使用的场景。

### JSX Element
JSX (JavaScript XML) 是一个React语法扩展，它允许我们在JavaScript代码中写类似HTML的标记。每当我们编写诸如 `<div>Hello World</div>` 这样的代码时，我们实际上创建了一个JSX Element。

**使用场景:**
- **直接在组件中编写UI:** 最直接的使用场景就是在函数组件或类组件中返回UI布局时。
  ```jsx
  function Welcome() {
    return <div>Welcome to React</div>;
  }
  ```
- **条件渲染:** 在需要根据条件判断来显示不同的UI元素时，通常会使用JSX Elements。
  ```jsx
  function Greeting({ isUserLoggedIn }) {
    return isUserLoggedIn ? <div>Welcome back!</div> : <div>Please sign in.</div>;
  }
  ```

### ReactNode
`ReactNode` 是React类型定义中的一个类型，它可以是字符串或数字类型的文本，JSX元素，JSX Fragment，`null` 或者 `undefined`，甚至是这些类型的数组。`ReactNode` 更多是用于类型定义，确保组件可以处理各种类型的子组件或值。

**使用场景:**
- **作为props或子组件:** 当编写可复用组件时，我们可以将其子元素类型指定为`ReactNode`，以接受多种类型的子元素。
  ```jsx
  type CardProps = {
    children: React.ReactNode;
  };

  function Card({ children }: CardProps) {
    return <div className="card">{children}</div>;
  }
  ```
- **渲染动态内容:** 在渲染不确定类型的内容时，使用`ReactNode`类型可以使得组件更加灵活。
  ```jsx
  const content: React.ReactNode = getContent(); // getContent可能返回字符串、元素或null
  return <div>{content}</div>;
  ```

### ReactElement
`ReactElement` 是对JSX Element的一种抽象，它们是由`React.createElement()`函数创建的对象。当JSX编译之后，每个JSX元素实际上都会变成一个`ReactElement`。

**使用场景:**
- **使用createElement创建元素:** 当我们需要在不使用JSX语法的环境中创建元素时，可以使用`React.createElement`。
  ```jsx
  function Button() {
    return React.createElement('button', null, 'Click me');
  }
  ```
- **类型定义:** 当我们需要明确一个变量或一个函数返回值应该是React元素时。
  ```tsx
  function getHeaderElement(): React.ReactElement {
    return <h1>Header</h1>;
  }
  ```

总结来说：
- **JSX Element** 是我们编写的类HTML代码，用于声明式地描述UI。
- **ReactNode** 是一个类型定义，涵盖了可以渲染的几乎所有类型的内容。
- **ReactElement** 是由React.createElement创建的对象，它是JSX元素的底层表示形式。

开发者会根据具体的应用场景，结合TypeScript或PropTypes的类型系统，来决定何时使用它们。这些类型的使用有助于确保组件的可复用性、可维护性，以及在不同的使用场景中保持类型的一致性。

> What is the difference between JSX.Element, ReactNode and ReactElement?

A [`ReactElement`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L318-L325) is an object with `type`, `props`, and `key` properties:

    interface ReactElement<
      P = any,
      T extends
        | string
        | JSXElementConstructor<any> = string
        | JSXElementConstructor<any>,
    > {
      type: T;
      props: P;
      key: string | null;
    }
    

A [`JSX.Element`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L4235) is a `ReactElement<any, any>`. It exists as various libraries can implement `JSX` in their own way:

    declare global {
      // …
      namespace JSX {
        // …
        interface Element extends React.ReactElement<any, any> {}
        // …
      }
      // …
    }
    

A [`ReactPortal`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L368-L370) is a `ReactElement` with a `children` property:

    interface ReactPortal extends ReactElement {
      children: ReactNode;
    }
    

A [`ReactNode`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L467-L478) is a `ReactElement`, `string`, `number`, `Iterable<ReactNode>`, `ReactPortal`, `boolean`, `null`, or `undefined`:

    type ReactNode =
      | ReactElement
      | string
      | number
      | Iterable<ReactNode>
      | ReactPortal
      | boolean
      | null
      | undefined;
    

Example:

    <div> // <- ReactElement
      <Component> // <- ReactElement
        {condition && 'text'} // <- ReactNode
      </Component>
    </div>
    

> Why do the render methods of class components return ReactNode, but function components return ReactElement?

This is due to [historical reasons](https://stackoverflow.com/a/59840095/5260024).

A [`Component.render`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts#L433-L507) returns a `ReactNode`:

    class Component<P, S> {
      // …
      render(): ReactNode;
      // …
    }
    

A [`FunctionComponent`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v17/index.d.ts#L543-L549) returns a `ReactElement<any, any> | null`:

    interface FunctionComponent<P = {}> {
      (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
      propTypes?: WeakValidationMap<P> | undefined;
      contextTypes?: ValidationMap<any> | undefined;
      defaultProps?: Partial<P> | undefined;
      displayName?: string | undefined;
    }
    

> How do I solve this with respect to null?

Type it as `ReactElement | null` just as React does. Or let TypeScript infer the type.

> 1.) What is the difference between JSX.Element, ReactNode and ReactElement?

**ReactElement and JSX.Element** are the result of invoking [`React.createElement`](https://reactjs.org/docs/react-api.html#createelement) directly or via JSX transpilation. It is an object with `type`, `props` and `key`. [`JSX.Element`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/24f1d0c82da2d898acd03fbb3e692eba3c431f82/types/react/index.d.ts#L2882) is `ReactElement`, whose `props` and `type` have type `any`, so they are more or less the same.

    const jsx = <div>hello</div>
    const ele = React.createElement("div", null, "hello");
    

**ReactNode** is used as return type for `render()` in class components. It also is the default type for `children` attribute with [`PropsWithChildren`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/24f1d0c82da2d898acd03fbb3e692eba3c431f82/types/react/index.d.ts#L773).

    const Comp: FunctionComponent = props => <div>{props.children}</div> 
    // children?: React.ReactNode
    

It looks more complicated in the [React type declarations](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/2034c45/types/react/index.d.ts#L203), but is _equivalent_ to:

    type ReactNode = {} | null | undefined;
    // super type `{}` has absorbed *all* other types, which are sub types of `{}`
    // so it is a very "broad" type (I don't want to say useless...)
    

You can assign almost everything to `ReactNode`. I usually would prefer stronger types, but there might be some valid cases to use it.

* * *

> 2.) Why do the render methods of class components return ReactNode, but function components return ReactElement?

**tl;dr:** It is a current TS type incompatibility [not related to core React](https://github.com/microsoft/TypeScript/issues/21699).

*   TS class component: returns `ReactNode` with `render()`, more permissive than React/JS
    
*   TS function component: returns `JSX.Element | null`, more restrictive than React/JS
    

In principle, `render()` in React/JS class components [supports the same return types](https://github.com/facebook/react/issues/12155#issuecomment-363089187) as a function component. With regard to TS, the different types are a type inconsistency still kept due to historical reasons and the need for backwards-compatibility.

Ideally a [valid return type](https://reactjs.org/docs/react-component.html#render) would probably look more like this:

    type ComponentReturnType = ReactElement | Array<ComponentReturnType> | string | number 
      | boolean | null // Note: undefined is invalid
    

* * *

> 3.) How do I solve this with respect to null?

Some options:

    // Use type inference; inferred return type is `JSX.Element | null`
    const MyComp1 = ({ condition }: { condition: boolean }) =>
        condition ? <div>Hello</div> : null
    
    // Use explicit function return types; Add `null`, if needed
    const MyComp2 = (): JSX.Element => <div>Hello</div>; 
    const MyComp3 = (): React.ReactElement => <div>Hello</div>;  
    // Option 3 is equivalent to 2 + we don't need to use a global (JSX namespace)
    
    // Use built-in `FunctionComponent` or `FC` type
    const MyComp4: React.FC<MyProps> = () => <div>Hello</div>;
    

_Note:_ Avoiding `React.FC` [won't save](https://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wFgAoCtCAOwGd4BhXMOAXjgAoBKdgPgIAJJABsREMuWr14AQTCsOPfnAA8zcHAD0ArVrgApAMoANOKKQgkNeDACeYJHADkDKMBoBzZ3GB04NBDwKHDSbgCuGNBwmOE0GMC0MdHGZhZWNnQAdEA) you from the `JSX.Element | null` return type restriction.

Create React App recently [dropped `React.FC`](https://github.com/facebook/create-react-app/pull/8177) from its template, as it has some quirks like an implicit [`{children?: ReactNode}`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/2034c45/types/react/index.d.ts#L787) type definition. So using `React.FC` sparingly might be preferable.

In edge cases, you can add a type assertion or Fragments as workaround:

    const MyCompFragment: FunctionComponent = () => <>"Hello"</>
    const MyCompCast: FunctionComponent = () => "Hello" as any 
    // alternative to `as any`: `as unknown as JSX.Element | null`

**ReactElement** is the type for elements in React, either created via **JSX** or **React.createElement**.

    const a = <div/> // this is a ReactElement
    

**ReactNode** is wider, it can be text, number, boolean, null, undefined, a portal, a ReactElement, or an array of ReactNodes. It represents **anything that React can render**.

    const a = (
      <div>
         hello {[1, "world", true]} // this is a ReactNode
      </div>
    )
    

`JSX.Element` is an internal hook for Typescript. It is _set equal to_ ReactElement to tell Typescript that every JSX expressions should be typed as ReactElements. But if we'd use Preact, or other technologies using JSX it would be set to something else.

**Functional components** return `ReactElement | null`, so it cannot return a bare string or an array of ReactElements. It is a [known](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33006) [limitation](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20544). The workaround is to use **Fragments** :

    const Foo = () => {
      return <>hello world!</>  // this works
    }
    

**Class components'** render function return `ReactNode`, so there shouldn't be any problem.

[https://github.com/typescript-cheatsheets/react#useful-react-prop-type-examples](https://github.com/typescript-cheatsheets/react#useful-react-prop-type-examples)

    export declare interface AppProps {
      children1: JSX.Element; // bad, doesnt account for arrays
      children2: JSX.Element | JSX.Element[]; // meh, doesn't accept strings
      children3: React.ReactChildren; // despite the name, not at all an appropriate type; it is a utility
      children4: React.ReactChild[]; // better, accepts array children
      children: React.ReactNode; // best, accepts everything (see edge case below)
      functionChildren: (name: string) => React.ReactNode; // recommended function as a child render prop type
      style?: React.CSSProperties; // to pass through style props
      onChange?: React.FormEventHandler<HTMLInputElement>; // form events! the generic parameter is the type of event.target
      //  more info: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#wrappingmirroring
      props: Props & React.ComponentPropsWithoutRef<"button">; // to impersonate all the props of a button element and explicitly not forwarding its ref
      props2: Props & React.ComponentPropsWithRef<MyButtonWithForwardRef>; // to impersonate all the props of MyButtonForwardedRef and explicitly forwarding its ref
    }

Let's understand JSX.Element vs React.ReactElement vs React.ReactNode step by step:

`JSX.Element` and `React.ReactElement`
======================================

`JSX.Element` and `React.ReactElement` are functionally the same type. They can be used interchangeably.

Consider below example:

    const element = <div className="greeting">Hello, world!</div>;
    

When the above JSX code runs, it doesn't directly create something you can see on the screen. Instead, it creates a JavaScript object that describes that piece of UI. This object is like a blueprint or a recipe. This is how this blueprint or recipe object will look like:

    const element = {
      type: 'div',
      props: {
        className: 'greeting',
        children: 'Hello, world!'
      }
    };
    

1.  **type**: This tells React what type of element we want to create. In this case, it's a `div`.
2.  **props**: This is an object that holds all the properties (or "props") that we've passed to our element. Here, we've passed a `className` prop with the value `'greeting'`.
3.  **children**: This is a special prop that represents the content inside our element. In this case, it's the string `'Hello, world!'`.

This object is what React uses to understand how to build and update the actual UI on the screen. When React sees this object, it knows to create a div element, give it a class of 'greeting', and put the text 'Hello, world!' inside it.

In a nutshell, we say A ReactElement is an object with a type and props.

So what is the difference between `JSX.Element` and `React.ReactElement`?
=========================================================================

`JSX.Element` is a TypeScript type for JSX expressions, and `React.ReactElement` is a React type for React elements.

Is this correct?
================

    const Component = ({
      children,
    }: {
      children: JSX.Element;
    }) => {
      return <div>{children}</div>;
    };
    
    
    // Usage
    
    <Component>hello world</Component>
    

In above stated example, TypeScript isn't happy because we declared the type of `children` to be `JSX.Element`, however, we are passing a string ("hello world") which is not a `JSX.Element`. Hence, we need a different type for `children` that can accept string, number, null, ReactElement ....

This is where `React.ReactNode` shines.

React.ReactNode
===============

As per below definition of `React.ReactNode`.

`React.ReactNode` is a ReactElement, string, number, ReactFragment, ReactPortal, boolean, null & undefined.

    declare namespace React {
      type ReactNode =
        | ReactElement
        | string
        | number
        | ReactFragment
        | ReactPortal
        | boolean
        | null
        | undefined;
    }
    

Example:

    const Component = ({
      children,
    }: {
      children: React.ReactNode
    }) => {
      return <div>{children}</div>;
    };
    
    
    // Usage
    <Component> Hello World </Component>
    

Now TypeScript is happy!!

Happy coding!

When to use JSX.Element vs ReactNode vs ReactElement?

`.dts` 文件，即 TypeScript 声明文件，是一种提供 TypeScript 代码中存在的各类值的类型信息的文件。这些文件通常用于两个主要场景：

1. **与 JavaScript 库的互操作**：当 TypeScript 代码需要与纯 JavaScript 库一起工作时，`.dts` 文件可以提供该 JavaScript 库中函数、对象和类的类型定义。这样，TypeScript 编译器就能理解 JavaScript 库的结构，并且确保 TypeScript 代码以类型安全的方式使用这些库。

2. **模块声明**：在 TypeScript 项目中，如果某个模块不希望暴露它的源代码，但需要让其他 TypeScript 代码理解其公共接口的类型信息，那么就可以使用 `.dts` 文件来声明这些公共接口。

一个简单的例子是，假设有一个简单的 JavaScript 函数库 `math-lib.js`，它提供了一个加法函数：

```javascript
// math-lib.js
function add(a, b) {
  return a + b;
}
module.exports = { add };
```

要在 TypeScript 中使用这个库并享受类型检查的好处，我们需要一个声明文件 `math-lib.d.ts`，如下所示：

```typescript
// math-lib.d.ts
export function add(a: number, b: number): number;
```

有了这个声明文件，TypeScript 代码可以安全地导入和使用 `add` 函数，并且如果尝试传入非数字类型的参数，TypeScript 编译器将会产生错误。

使用声明文件，从而使得 TypeScript 项目能够更加安全地使用外部 JavaScript 代码库，同时也能帮助开发者更好地理解外部代码的类型结构。

“d.ts”文件用于提供有关用 JavaScript 编写的 API 的打字稿类型信息。这个想法是你正在使用像 jQuery 或 underscore 这样的东西，一个现有的 javascript 库。您想从打字稿代码中使用这些内容。

您可以编写仅包含类型注释的 d.ts 文件，而不是在打字稿中重写 jquery 或下划线或其他内容。然后，您可以从 Typescript 代码中获得静态类型检查的 TypeScript 优势，同时仍然使用纯 JS 库。

这要归功于 TypeScript 的限制，即不允许您在语句末尾添加“.ts”扩展名`import`。因此，当您引用某个文件时，比如说，`my-module.js`如果它`my-module.d.ts`旁边有 ，那么 TypeScript 将包含其内容：

    src/
      my-module.js
      my-module.d.ts
      index.ts
    

_我的模块.js_

    const thing = 42;
    
    module.exports = { thing };
    

_我的模块.d.ts_

    export declare const thing: number;
    

_索引.ts_

    import { thing } from "./my-module"; // <- no extension
    
    // runtime implementation of `thing` is taken from ".js"
    console.log(thing); // 42
    
    // type declaration of `thing` is taken from ".d.ts"
    type TypeOfThing = typeof thing; // number

`d`代表[声明文件](https://en.wikipedia.org/wiki/TypeScript#Declaration_files)：

> 当编译 TypeScript 脚本时，可以选择生成一个声明文件（扩展名为 .d.ts），该文件充当已编译 JavaScript 中组件的接口。在此过程中，编译器会剥离所有函数和方法体，仅保留导出类型的签名。当第三方开发人员从 TypeScript 使用 JavaScript 库或模块时，生成的声明文件可用于描述导出的虚拟 TypeScript 类型。
> 
> 声明文件的概念类似于 C/C++ 中的头文件的概念。

    declare module arithmetics {
        add(left: number, right: number): number;
        subtract(left: number, right: number): number;
        multiply(left: number, right: number): number;
        divide(left: number, right: number): number;
    }
    

> 可以为现有 JavaScript 库手动编写类型声明文件，就像为 jQuery 和 Node.js 所做的那样。
> 
> 流行 JavaScript 库的大量声明文件托管在 GitHub 上的[DefinelyTyped](https://github.com/DefinitelyTyped)和[Typings Registry](https://github.com/typings/registry)中。提供了一个名为[Typings](https://github.com/typings/typings)的命令行实用程序来帮助从存储库中搜索和安装声明文件。

我从必须使用`.d.ts`文件煞费苦心地映射 JavaScript 项目中学到了以下内容。

使用`.d.ts`文件映射 JavaScript 要求您的`.d.ts`文件命名与您的文件命名相同`.js`。每个文件都需要与同名文件`.js`保持内联（保存在同一目录中） 。`.d.ts`将需要类型的 JS/TS 代码从`.d.ts`文件指向`.d.ts`文件。

例如：`test.js`和`test.d.ts`位于`testdir/`文件夹中，然后将其导入到反应组件中：

    import * as Test from "./testdir/test";
    

该`.d.ts`文件被导出为命名空间，如下所示：

    export as namespace Test;
        
    export interface TestInterface1{}
    export class TestClass1{}

针对_特定案例的_**工作示例**：

假设您有通过_npm_共享的_my-module_。

你安装它`npm install my-module`

你这样使用它：

    import * as lol from 'my-module';
    
    const a = lol('abc', 'def');
    

该模块的逻辑全部在`index.js`：

    module.exports = function(firstString, secondString) {
    
      // your code
    
      return result
    }
    

要添加类型，请创建一个文件`index.d.ts`：

    declare module 'my-module' {
      export default function anyName(arg1: string, arg2: string): MyResponse;
    }
    
    interface MyResponse {
      something: number;
      anything: number;
    }

就像 @takeshin 所说的 .d 代表打字稿（.ts）的声明文件。

**在继续回答这篇文章之前需要澄清几点 -**

1.  Typescript 是 javascript 的语法超集。
2.  Typescript 不能单独运行，它需要被转译为 javascript（[Typescript 到 javascript 转换](https://storefront-staging.paytm.com/dev1/v2/h/mumbiker-nikhil?merchant_id=43486&aggregator-bid=1707)）
3.  “类型定义”和“类型检查”是 Typescript 通过 JavaScript 提供的主要附加功能。（[检查 type script 和 javascript 之间的区别](https://stackify.com/typescript-vs-javascript-migrate/)）

如果您认为 typescript 只是语法超集，那么它有什么好处 - [https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system](https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system)

**回答这篇文章 -**

正如我们所讨论的，TypeScript 是 javascript 的超集，需要转换为 javascript。因此，如果库或第三方代码是用 typescript 编写的，它最终会转换为可由 javascript 项目使用的 javascript，但反之亦然。

对于前 -

如果你安装了 javascript 库 -

    npm install --save mylib
    

并尝试在打字稿代码中导入它 -

    import * from "mylib";
    

你会得到错误。

> “找不到模块‘mylib’。”

正如@Chris 提到的，许多库（例如 underscore、Jquery）已经用 javascript 编写。我们需要一种替代解决方案，而不是为打字稿项目重写这些库。

为此，您可以在名为 \*.d.ts 的 javascript 库中提供类型声明文件，如上面的情况 mylib.d.ts 所示。声明文件仅提供各自 javascript 文件中定义的函数和变量的类型声明。

现在当你尝试时 -

    import * from "mylib";
    

mylib.d.ts 被导入，充当 javascript 库代码和 typescript 项目之间的接口。

TypeScript 的 `.dts` 文件是定义文件（Definition Files）的缩写。它们用于为已存在的 JavaScript 代码提供类型定义信息。这意味着你可以在 TypeScript 项目中使用纯 JavaScript 写的库或框架，而 `.dts` 文件会告诉 TypeScript 编译器这些库的结构，包括它们的类型、函数、类和其他 API 的签名。

`.dts` 文件的好处是它们允许开发者在不改变原有 JavaScript 代码的情况下，享受到 TypeScript 提供的类型检查和代码自动补全等特性。

例如，如果你在 TypeScript 项目中使用 jQuery，你可以引入 jQuery 的定义文件（通常通过 DefinitelyTyped 社区提供的 `@types/jquery` 包），这样 TypeScript 编译器就能理解 jQuery 的 `$` 函数、jQuery 对象的方法等等。代码示例如下：

```typescript
// 引入 jQuery 的类型定义
/// <reference types="jquery" />

// 使用 jQuery
$('selector').html('Hello, world!');
```

在这个例子中，`$('selector').html('Hello, world!');` 这行代码通过了 TypeScript 编译器的类型检查，因为 `.dts` 文件提供了 `.html()` 方法的类型信息。

定义文件也可以帮助开发者理解第三方库的使用方式，因为它们充当了库的文档。通过查看定义文件，开发者可以了解到某个函数接受哪些参数，这些参数的类型是什么，以及函数返回什么类型的值。这极大地提高了开发效率和代码的安全性。

最后，`.dts` 文件也可以用来定义自己的代码的公共接口，特别是在编写库时，这样使用你库的其他 TypeScript 用户就可以获得类型检查和代码智能提示。

What is the d ts file in typescript

在TypeScript中，如果我们想要向`window`对象添加一个新的属性，我们需要扩展`Window`接口，并告知TypeScript我们正在添加的类型。由于`window`是全局对象，TypeScript需要知道属性的类型以确保类型安全。这可以通过声明合并来完成。

这里是一个例子，展示如何向`window`对象添加名为`myNewProperty`的新属性：

```typescript
// 首先，声明合并来扩展现有的Window接口
interface Window {
  myNewProperty: string;
}

// 然后，可以安全地向window添加新属性
window.myNewProperty = "Hello, World!";

// 使用该属性时，TypeScript会知道其类型
console.log(window.myNewProperty); // 输出："Hello, World!"
```

在这个例子中，我们首先通过声明一个同名的`Window`接口来扩展全局的`Window`接口。这里的关键是使用`interface`这个关键字，而不是用`type`。声明合并允许我们安全地添加`myNewProperty`属性，而不会破坏`window`对象上的其他属性或方法的类型定义。

现在，TypeScript知道`window`对象上存在一个名为`myNewProperty`的属性，并且它的类型是`string`。这样，当我们给`window.myNewProperty`赋值时，TypeScript将允许任何字符串类型的值，并在我们尝试赋予不兼容的类型时提供错误警告。

还需要注意的是，在实际的前端项目中直接修改`window`对象并不是一个好的做法，因为这可能会造成全局状态污染，很难追踪和维护。通常，我们应该尽量避免向全局作用域添加额外的状态或功能，除非真的有必要这样做。

I just found the answer to this in [another Stack Overflow question's answer](https://stackoverflow.com/a/12703866/31308).

    declare global {
        interface Window { MyNamespace: any; }
    }
    
    window.MyNamespace = window.MyNamespace || {};
    

Basically, you need to extend the existing `window` interface to tell it about your new property.

To keep it dynamic, just use:

    (<any>window).MyNamespace
    

Note that this may not work with TSX because the compiler might think that the `<any>` is a TSX element. Check out [this answer](https://stackoverflow.com/a/38964459/1250319) for type assertion that is compatible with TSX.

Using Svelte or TSX? None of the other answers were working for me.

Here's what I did:

    (window as any).MyNamespace

_**As of TypeScript ^3.4.3, this solution no longer works**_

Or...

you can just type:

    window['MyNamespace']
    

And you won’t get a compile error and it works the same as typing `window.MyNamespace`.

Globals are "evil" :) I think the best way to also have the portability is:

First you export the interface: (for example, _./custom.window.ts_)

    export interface CustomWindow extends Window {
        customAttribute: any;
    }
    

Second, you import

    import {CustomWindow} from './custom.window.ts';
    

Third, cast the global variable window with CustomWindow:

    declare let window: CustomWindow;
    

In this way you also don't have a red line in a different IDE if you use it with existent attributes of the _window_ object, so at the end try:

    window.customAttribute = 'works';
    window.location.href = '/works';
    

Tested with TypeScript 2.4.x and newest!

在 TypeScript 中，你通常不应该直接向 `window` 对象添加新的属性，因为这样做会破坏全局作用域的安全性和可预测性。但是，如果你确实需要这样做（例如，为了与第三方库集成），你可以通过扩展 `Window` 接口来显式声明新属性。

下面是一个例子，展示了如何在 TypeScript 中给 `window` 对象添加一个名为 `myCustomProperty` 的新属性：

```typescript
// 首先，使用 TypeScript 的声明合并特性扩展全局 Window 接口
declare global {
  interface Window {
    myCustomProperty: string;
  }
}

// 现在你可以安全地设置 window 的新属性
window.myCustomProperty = 'some value';

// 也可以读取该属性
console.log(window.myCustomProperty);
```

在这个例子中，我们首先使用 `declare global` 语句来扩展全局作用域中的 `Window` 接口。然后，我们声明了 `myCustomProperty` 为 `string` 类型的属性。这样 TypeScript 编译器就知道 `window` 对象上存在这个新属性，并且知道它的类型。这允许你在代码的其他部分安全地使用 `window.myCustomProperty` 而不会得到类型错误。

请注意，如果你正在一个模块环境中工作（即任何包含顶级 import 或 export 声明的文件），你需要将 `declare global` 包装在一个模块声明中，否则它不会被视为全局声明。例如：

```typescript
export {}; // 这个文件现在是一个模块

declare global {
  interface Window {
    myCustomProperty: string;
  }
}

window.myCustomProperty = 'some value';
```

在这里，`export {}` 把文件转变成了一个模块，允许我们使用 `declare global` 来做全局的声明。如果你不包括 `export {}`，那么 `declare global` 会引发一个错误，因为 TypeScript 会认为你正在试图在模块作用域中声明一个全局变量。

在TypeScript中，向`window`对象添加新属性需要两个步骤：

1. **扩展`Window`接口**：由于TypeScript使用结构类型系统，我们可以通过声明合并来扩展现有的类型定义。对于`window`对象，我们需要扩展全局`Window`接口。

2. **设置属性**：在扩展了接口之后，我们就可以像在JavaScript中一样向`window`对象添加属性。

下面是一个如何向`window`对象添加新属性的例子：

```typescript
// Step 1: Extend the Window interface with the new property
interface Window {
  myCustomProperty: string;
}

// Step 2: Add the property to the window object
window.myCustomProperty = "This is a custom property on the window object";

console.log(window.myCustomProperty); // 输出: This is a custom property on the window object
```

在上面的例子中，我们首先扩展了`Window`接口来包含一个名为`myCustomProperty`的字符串属性。然后，我们实际上为`window`对象设置了这个属性。

重要的是要注意，这样的操作不是最佳实践，因为直接向全局对象添加属性会导致全局命名空间的污染。在实际的TypeScript项目中，我们通常会避免这么做，除非在某些特殊情况下确实需要，比如在进行polyfill或者与第三方库集成时。

此外，如果你的TypeScript编译选项中设置了`strict`模式或者`noImplicitAny`为`true`，你可能还需要确保对`window`对象的扩展是在正确的作用域中完成的，例如在一个全局的`.d.ts`文件中，这样才不会影响其他文件中的类型检查。

How do you explicitly set a new property on window in typescript

在TypeScript中，动态地为对象分配属性可以通过几种方式来实现，包括索引签名、使用`Object.assign`方法，或者使用扩展操作符。下面我将分别解释每种方法，并提供示例。

### 1. 索引签名
如果你想要一个对象能够接受任意数量的属性，你可以在TypeScript中使用索引签名(index signature)。索引签名的写法就是在接口中使用`[key: T]: U`的形式，其中`T`通常是`string`或`number`，`U`则是任何类型，表示对象的属性值的类型。

```typescript
interface DynamicObject {
  [key: string]: any;
}

const obj: DynamicObject = {};
obj.dynamicProperty = 'value';
```

在这个例子中，`DynamicObject`接口允许你给`obj`对象分配任何字符串属性，其值可以是任何类型。

### 2. 使用`Object.assign`
`Object.assign`方法可以用来将所有可枚举的属性从一个或多个源对象复制到目标对象，并返回目标对象。

```typescript
const obj: { [key: string]: any } = {};

Object.assign(obj, {
  dynamicProperty: 'value',
  anotherProperty: 123,
});
```

在这个例子中，`Object.assign`用于向`obj`添加`dynamicProperty`和`anotherProperty`属性。

### 3. 使用扩展操作符（Spread Operator）
扩展操作符可以用于复制对象的属性。这通常用在对象字面量中，当你想要在创建新对象时添加额外属性。

```typescript
let obj: { [key: string]: any } = {};

obj = {
  ...obj,
  dynamicProperty: 'value',
};
```

在这个例子中，我们创建了一个新对象，它具有`obj`原来的所有属性，并添加了一个名为`dynamicProperty`的新属性。

### 动态属性名
除了上述几种方法之外，如果你想动态地定义属性的名字，你可以使用计算属性名(computed property names)。

```typescript
const propName = 'dynamicProperty';
const obj: { [key: string]: any } = {};

obj[propName] = 'value';
```

在这个例子中，`propName`变量的值被用作对象`obj`的属性名。

以上就是在TypeScript中为对象动态分配属性的几种方式，每种方法都可以根据不同的场景选择使用。### 4. 类型断言
在某些情况下，你可能需要对现有的对象进行操作，为其添加属性。在TypeScript中，如果你非常确信这样做不会导致运行时错误，可以使用类型断言(temporary type assertion)来绕过类型检查。

```typescript
interface BaseObject {
  baseProperty: string;
}

const obj = {} as BaseObject;
obj.baseProperty = 'base';
obj['dynamicProperty'] = 'dynamic value';
```

在这个例子中，我们首先声明了一个接口`BaseObject`，然后我们创建了一个空对象并断言它为`BaseObject`类型，然后我们为其添加了一个动态属性。这种方法应该慎用，因为它会绕过编译器的类型检查。

### 5. 映射类型
映射类型(Map Types)在TypeScript中也是一种强大的方式，可以用来动态地创建带有属性的对象类型。

```typescript
type DynamicKeys<T> = {
  [P in keyof T]: T[P];
};

interface KnownProps {
  fixedProperty: string;
}

type ExtendedObject = DynamicKeys<KnownProps & { [key: string]: any }>;

const obj: ExtendedObject = { fixedProperty: 'fixed' };
obj.dynamicProperty = 'dynamic value';
```

在这个例子中，我们定义了一个`DynamicKeys`映射类型，它将传入的类型`T`的每个属性映射到相同的类型。然后我们定义了一个`KnownProps`接口，最后我们创建了一个`ExtendedObject`类型，它结合了`KnownProps`和一个索引签名来允许动态属性。这样我们就可以在保留原有属性类型的同时，为对象添加任意的新属性。

### 6. 使用类型守卫
有时，你可能在一个已经定义好的对象类型上临时添加属性。为了保持类型安全，你可以使用类型守卫来检查属性是否存在，并在添加属性之前进行断言。

```typescript
interface BaseObject {
  baseProperty?: string;
}

const obj: BaseObject = {};

// 假设我们想要添加一个不确定是否已经存在的属性
if (!('dynamicProperty' in obj)) {
  // obj 现在被视为具有 dynamicProperty 属性的类型
  (obj as any).dynamicProperty = 'dynamic value'; // 使用 'any' 断言绕过类型系统
}
```

在这里，我们使用`in`操作符作为类型守卫，以确保我们不会覆盖对象上已经存在的属性。

### 小结
在实际应用中，你应该根据具体的需求和场景选择合适的方法。动态属性的引入可能会使得类型检查变得复杂，因此请务必在确保类型安全的前提下使用这些技术，并尽可能利用TypeScript的类型系统来维护良好的代码健壮性。

Index signatures
----------------

It is possible to denote `obj` as `any`, but that defeats the whole purpose of using typescript. `obj = {}` implies `obj` is an `Object`. Marking it as `any` makes no sense. To accomplish the desired consistency an interface could be defined as follows, using an [index signature](https://www.typescriptlang.org/docs/handbook/2/objects.html#index-signatures)

    interface LooseObject {
        [key: string]: any
    }
    
    var obj: LooseObject = {};
    

OR to make it compact:

    var obj: {[k: string]: any} = {};
    

`LooseObject` can accept fields with any string as key and `any` type as value.

    obj.prop = "value";
    obj.prop2 = 88;
    

The real elegance of this solution is that you can include typesafe fields in the interface.

    interface MyType {
        typesafeProp1?: number,
        requiredProp1: string,
        [key: string]: any
    }
    
    var obj: MyType ;
    obj = { requiredProp1: "foo"}; // valid
    obj = {} // error. 'requiredProp1' is missing
    obj.typesafeProp1 = "bar" // error. typesafeProp1 should be a number
    
    obj.prop = "value";
    obj.prop2 = 88;
    

`Record<Keys,Type>` utility type
--------------------------------

_Update (August 2020): @transang brought up the [`Record<Keys,Type>` utility type](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type) in comments_

> `Record<Keys,Type>` is a Utility type in typescript. It is a much cleaner alternative for key-value pairs where property-names are not known. It's worth noting that `Record<Keys,Type>` is a named alias to `{[k: Keys]: Type}` where `Keys` and `Type` are generics. IMO, this makes it worth mentioning here

For comparison,

    var obj: {[k: string]: any} = {};
    

becomes

    var obj: Record<string,any> = {}
    

`MyType` can now be defined by extending Record type

    interface MyType extends Record<string,any> {
        typesafeProp1?: number,
        requiredProp1: string,
    }
    

While this answers the Original question, the answer [here](https://stackoverflow.com/a/54445030/2605574) by @GreeneCreations might give another perspective on how to approach the problem.

This solution is useful when your object has Specific Type. Like when obtaining the object to other source.

    let user: User = new User();
    (user as any).otherProperty = 'hello';
    //user did not lose its type here.

Or all in one go:

      var obj:any = {}
      obj.prop = 5;

I tend to put `any` on the other side i.e. `var foo:IFoo = <any>{};` So something like this is still typesafe:

    interface IFoo{
        bar:string;
        baz:string;
        boo:string;     
    }
    
    // How I tend to intialize 
    var foo:IFoo = <any>{};
    
    foo.bar = "asdf";
    foo.baz = "boo";
    foo.boo = "boo";
    
    // the following is an error, 
    // so you haven't lost type safety
    foo.bar = 123; 
    

Alternatively you can mark these properties as optional:

    interface IFoo{
        bar?:string;
        baz?:string;
        boo?:string;    
    }
    
    // Now your simple initialization works
    var foo:IFoo = {};
    

[Try it online](http://www.typescriptlang.org/Playground/#src=interface%20IFoo%7B%0A%09bar?:string;%0A%09baz?:string;%0A%09boo?:string;%20%09%0A%7D%0A%0A//%20How%20I%20tend%20to%20intialize%20%0Avar%20foo:IFoo%20=%20%7B%7D;%0A)

Although the compiler complains it should still output it as you require. However, this will work.

    const s = {};
    s['prop'] = true;

如何在 TypeScript 中动态为对象分配属性？,在 TypeScript 中，你可以使用多种方法来动态地为对象分配属性。以下是几种不同的方法：

### 方法 1: 使用索引签名
如果你提前知道属性的类型，但不知道属性的名称，你可以使用索引签名来定义一个对象，这个对象可以接受任意名称的属性。

```typescript
// 定义一个索引类型
interface DynamicObject {
  [key: string]: any; // 可以使用 string, number, symbol
}

// 创建一个动态对象
const obj: DynamicObject = {};

// 动态添加属性
obj['newProperty'] = 'New Value';
obj.dynamicField = 123;

console.log(obj);
```

### 方法 2: 使用泛型和 keyof
如果你有一个特定的对象类型，并且想要添加或修改这个类型的属性，你可以使用泛型和 `keyof`。

```typescript
type KnownObject = {
  existingProperty: string;
};

function setProperty<T, K extends keyof any, V>(
  obj: T,
  key: K,
  value: V
): T & Record<K, V> {
  return {
    ...obj,
    [key]: value,
  };
}

const knownObj: KnownObject = { existingProperty: 'Hello' };

const updatedObj = setProperty(knownObj, 'dynamicProperty', 456);

console.log(updatedObj);
```

### 方法 3: 使用 Object.assign()
`Object.assign()` 方法可以用来复制一个或多个源对象的所有可枚举自有属性到目标对象，返回目标对象。

```typescript
const obj: {[key: string]: any} = {};

Object.assign(obj, { dynamicProperty: 'Dynamic' });

console.log(obj);
```

### 方法 4: 使用扩展运算符（Spread Operator）
扩展运算符可以用来将现有对象的属性复制到新对象中，并添加新的属性。

```typescript
const obj = {};

const newProperty = 'dynamic';
const newObj = {
  ...obj,
  [newProperty]: 'Value',
};

console.log(newObj);
```

### 总结
以上是在 TypeScript 中动态分配对象属性的几种方法。在实际使用时，需要根据你的具体需求来选择合适的方法。使用索引签名和 `Object.assign()` 通常更灵活，而使用泛型和 `keyof` 可以为类型安全提供更强的保障。

在TypeScript中，动态地为对象分配属性可以通过几种方式来实现，包括索引签名、使用`Object.assign`方法，或者使用扩展操作符。下面我将分别解释每种方法，并提供示例。

### 1. 索引签名
如果你想要一个对象能够接受任意数量的属性，你可以在TypeScript中使用索引签名(index signature)。索引签名的写法就是在接口中使用`[key: T]: U`的形式，其中`T`通常是`string`或`number`，`U`则是任何类型，表示对象的属性值的类型。

```typescript
interface DynamicObject {
  [key: string]: any;
}

const obj: DynamicObject = {};
obj.dynamicProperty = 'value';
```

在这个例子中，`DynamicObject`接口允许你给`obj`对象分配任何字符串属性，其值可以是任何类型。

### 2. 使用`Object.assign`
`Object.assign`方法可以用来将所有可枚举的属性从一个或多个源对象复制到目标对象，并返回目标对象。

```typescript
const obj: { [key: string]: any } = {};

Object.assign(obj, {
  dynamicProperty: 'value',
  anotherProperty: 123,
});
```

在这个例子中，`Object.assign`用于向`obj`添加`dynamicProperty`和`anotherProperty`属性。

### 3. 使用扩展操作符（Spread Operator）
扩展操作符可以用于复制对象的属性。这通常用在对象字面量中，当你想要在创建新对象时添加额外属性。

```typescript
let obj: { [key: string]: any } = {};

obj = {
  ...obj,
  dynamicProperty: 'value',
};
```

在这个例子中，我们创建了一个新对象，它具有`obj`原来的所有属性，并添加了一个名为`dynamicProperty`的新属性。

### 动态属性名
除了上述几种方法之外，如果你想动态地定义属性的名字，你可以使用计算属性名(computed property names)。

```typescript
const propName = 'dynamicProperty';
const obj: { [key: string]: any } = {};

obj[propName] = 'value';
```

在这个例子中，`propName`变量的值被用作对象`obj`的属性名。

以上就是在TypeScript中为对象动态分配属性的几种方式，每种方法都可以根据不同的场景选择使用。
### 4. 类型断言
在某些情况下，你可能需要对现有的对象进行操作，为其添加属性。在TypeScript中，如果你非常确信这样做不会导致运行时错误，可以使用类型断言(temporary type assertion)来绕过类型检查。

```typescript
interface BaseObject {
  baseProperty: string;
}

const obj = {} as BaseObject;
obj.baseProperty = 'base';
obj['dynamicProperty'] = 'dynamic value';
```

在这个例子中，我们首先声明了一个接口`BaseObject`，然后我们创建了一个空对象并断言它为`BaseObject`类型，然后我们为其添加了一个动态属性。这种方法应该慎用，因为它会绕过编译器的类型检查。

### 5. 映射类型
映射类型(Map Types)在TypeScript中也是一种强大的方式，可以用来动态地创建带有属性的对象类型。

```typescript
type DynamicKeys<T> = {
  [P in keyof T]: T[P];
};

interface KnownProps {
  fixedProperty: string;
}

type ExtendedObject = DynamicKeys<KnownProps & { [key: string]: any }>;

const obj: ExtendedObject = { fixedProperty: 'fixed' };
obj.dynamicProperty = 'dynamic value';
```

在这个例子中，我们定义了一个`DynamicKeys`映射类型，它将传入的类型`T`的每个属性映射到相同的类型。然后我们定义了一个`KnownProps`接口，最后我们创建了一个`ExtendedObject`类型，它结合了`KnownProps`和一个索引签名来允许动态属性。这样我们就可以在保留原有属性类型的同时，为对象添加任意的新属性。

### 6. 使用类型守卫
有时，你可能在一个已经定义好的对象类型上临时添加属性。为了保持类型安全，你可以使用类型守卫来检查属性是否存在，并在添加属性之前进行断言。

```typescript
interface BaseObject {
  baseProperty?: string;
}

const obj: BaseObject = {};

// 假设我们想要添加一个不确定是否已经存在的属性
if (!('dynamicProperty' in obj)) {
  // obj 现在被视为具有 dynamicProperty 属性的类型
  (obj as any).dynamicProperty = 'dynamic value'; // 使用 'any' 断言绕过类型系统
}
```

在这里，我们使用`in`操作符作为类型守卫，以确保我们不会覆盖对象上已经存在的属性。

### 小结
在实际应用中，你应该根据具体的需求和场景选择合适的方法。动态属性的引入可能会使得类型检查变得复杂，因此请务必在确保类型安全的前提下使用这些技术，并尽可能利用TypeScript的类型系统来维护良好的代码健壮性。

How do i dynamically assign properties to an object in typescript

要在页面加载过程中使用 CSS3 过渡动画，你可以通过以下步骤实现：

1. **定义 CSS 过渡样式规则**：在CSS中为目标元素创建初始状态和过渡效果。例如，你可能想让一个元素从透明度为0变化到透明度为1，以实现淡入效果。

2. **设置初始状态**：通过在页面的`<style>`标签或外部 CSS 文件中设置目标元素的样式，为其赋予初始状态（比如 `opacity: 0;`）。

3. **设置过渡效果**：使用 `transition` 属性来定义过渡效果的持续时间和效果曲线。

4. **触发过渡**：页面加载时，通过 JavaScript 或者在DOM中添加一个类（class）来改变目标元素的状态，触发CSS过渡效果。

下面是一个简单的示例：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Load Transition Example</title>
<style>
/* 初始状态，元素不可见 */
.element {
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

/* 页面加载后的状态，元素逐渐变得可见 */
.element.loaded {
  opacity: 1;
}
</style>
</head>
<body>
<div class="element">Hello, World!</div>

<script>
window.addEventListener('DOMContentLoaded', (event) => {
  // 一旦DOM加载完成，给元素添加 'loaded' 类来触发过渡
  document.querySelector('.element').classList.add('loaded');
});
</script>
</body>
</html>
```

在这个示例中，`.element` 初始状态是不可见的 (`opacity: 0;`)。当文档的 DOMContentLoaded 事件被触发时（即页面的HTML被完全加载和解析时，但不一定要等待样式表、图像和子框架完成加载），JavaScript 将添加 `loaded` 类到 `.element`，从而触发一个 2 秒的淡入效果，使元素从完全透明渐变到完全不透明 (`opacity: 1;`)。

请注意，实际开发中常常还需要考虑浏览器的兼容性以及对无法执行JavaScript的情况的处理。此外，过渡效果对性能有一定影响，尤其是当涉及到大量元素或复杂的动画时。

可以在页面加载时运行**CSS**动画，而无需使用任何 JavaScript；你只需要使用**CSS3关键帧**。

## 例子 

**以下是仅使用CSS3**滑动到位的导航菜单的演示：

```
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>
```


## 解析

这里重要的部分是关键帧动画，我们称之为 `slideInFromLeft`

```
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
```

这基本上是说“在开始时，标题将以其整个宽度离开屏幕的左边缘，并在最后将就位”。

第二部分调用该 `slideInFromLeft`动画：

```
animation: 1s ease-out 0s 1 slideInFromLeft;
```

上面是简写版本，但为了清楚起见，这里是详细版本：

```
animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */
```


[这是 W3C 的说法。](http://www.w3.org/TR/css3-animations/#keyframes)

只需要很少的 JavaScript：

    window.onload = function() {
        document.body.className += " loaded";
    }
    

现在是CSS：

    .fadein {
        opacity: 0;
        -moz-transition: opacity 1.5s;
        -webkit-transition: opacity 1.5s;
        -o-transition: opacity 1.5s;
        transition: opacity 1.5s;
    }
    
    body.loaded .fadein {
        opacity: 1;
    }
    

我知道问题说的是“没有 Javascript”，但我认为值得指出的是，有一个涉及一行 Javascript 的简单解决方案。

它甚至可以是内联 Javascript，类似这样：

    <body onload="document.body.className += ' loaded';" class="fadein">
    

这就是所需的全部 JavaScript。

我想我已经找到了解决OP问题的一种方法 - 而不是从页面的“on.load”开始的过渡 - 我发现使用动画进行不透明度淡入具有相同的效果，（我正在寻找与OP相同）。

所以我想让正文文本在页面加载时从白色（与网站背景相同）淡入黑色文本颜色 - 而且我从周一才开始编码，所以我正在寻找“on.load”样式的代码，但还不知道 JS - 所以这是我的代码，对我来说效果很好。

    #main p {
      animation: fadein 2s;
    }
    @keyframes fadein {
      from { opacity: 0}
      to   { opacity: 1}
    }
    

无论出于何种原因，这`.class`仅适用于`#id`（至少不适用于我的）

希望这会有所帮助 - 据我所知，这个网站对我帮助很大！

**CSS仅延迟3s**

这里需要注意几点：

*   一次调用多个动画
*   我们创建一个**等待**动画，它只是延迟实际的动画（在我们的例子中是第二个动画）。

代码：

    header {
        animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
    }
    
    @keyframes wait {
        from { transform: translateY(20px); }
        to { transform: translateY(20px); }
    }
    
    @keyframes slideInFromBottom {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

嗯，这是一个棘手的问题。

答案是“并非如此”。

CSS 不是一个功能层。它不知道发生了什么或何时发生。它仅用于向不同的“标志”（类、id、状态）添加_表示_层。

默认情况下，CSS/DOM 不提供任何类型的“加载”状态供 CSS 使用。如果您想要/能够使用 JavaScript，您可以分配一个类`body`或一些东西来激活某些 CSS。

话虽如此，您可以为此创建一个 hack。我将在这里举一个例子，但它可能适用也可能不适用于您的情况。

我们的操作假设是“接近”就是“足够好”：

    <html>
    <head>
    
    </head>
    <body>
        
        <div class="onLoad">OMG, I've loaded !</div>
    </body>
    </html>
    

以下是 CSS 样式表的摘录：

    .onLoad
    {
        -webkit-animation:bounceIn 2s;
    }
    

我们还假设现代浏览器是渐进渲染的，所以我们的最后一个元素将最后渲染，因此这个 CSS 将最后激活。

How to using css3 transition animation on load

在浏览器中检测操作系统是否处于深色模式，我们可以使用CSS的媒体查询（Media Queries），具体来说是`prefers-color-scheme`这个媒体特性。`prefers-color-scheme` CSS媒体特性用于检测用户系统的颜色主题偏好，它可以让我们根据用户系统设置为深色模式或者浅色模式来调整网站或者应用的配色。

以下是如何使用CSS来根据操作系统的深色模式设置来改变网页样式的示例：

```css
/* 当操作系统设置为深色模式时，应用以下样式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: white;
  }
}

/* 当操作系统设置为浅色模式时，应用以下样式 */
@media (prefers-color-scheme: light) {
  body {
    background-color: #FFF;
    color: black;
  }
}
```

如果你想在JavaScript中检测这个偏好，可以使用`window.matchMedia`方法来查询`prefers-color-scheme`。这能够让你在JavaScript中根据深色模式或浅色模式动态地改变样式或执行其他操作。下面是一个例子：

```javascript
// 检测深色模式
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // 操作系统设置为深色模式
  // 在这里可以编写适应深色模式的代码
}

// 使用matchMedia添加监听器，在深色模式与浅色模式之间切换时执行操作
window.matchMedia('(prefers-color-scheme: dark)').addListener(function(e) {
  if (e.matches) {
    // 现在系统设置为深色模式
  } else {
    // 现在系统设置为浅色模式
  }
});
```

注意，`prefers-color-scheme`是一个相对较新的Web特性，可能在一些旧版浏览器中不被支持。因此，对于兼容性考虑，你可能还需要实现一些后备方案，或者使用JavaScript库来帮助检测。

新标准已在[W3C 媒体查询级别 5 中](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme)注册。

**注意：目前仅在**[Safari 技术预览版 68](https://developer.apple.com/safari/technology-preview/release-notes/)中可用[](https://developer.apple.com/safari/technology-preview/release-notes/)

如果用户偏好是`light`：

    /* Light mode */
    @media (prefers-color-scheme: light) {
        body {
            background-color: white;
            color: black;
        }
    }
    

如果用户偏好是`dark`：

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: black;
            color: white;
        }
    }
    

`no-preference`如果用户没有偏好，也可以选择。但我建议你在这种情况下使用普通的 CSS 并正确层叠你的 CSS。

> **编辑**（2018 年 12 月 7 日）：

在[Safari 技术预览版 71](https://developer.apple.com/safari/technology-preview/release-notes/)中，他们宣布了 Safari 中的切换开关，以使测试更容易。我还制作了一个[测试页面](https://davy.dev/darkmode)来查看浏览器的行为。

如果您安装了**Safari 技术预览版 71，**您可以通过以下方式激活：

> 开发 > 实验功能 > 深色模式 CSS 支持

然后，如果您打开[测试页面](https://davy.dev/darkmode)并打开元素检查器，您将看到一个新图标来切换暗/亮模式。

[![切换暗/亮模式](https://i.stack.imgur.com/z2SYe.png)](https://i.stack.imgur.com/z2SYe.png)

* * *

> **编辑**（2019 年 2 月 11 日）：Apple 推出新的[Safari 12.1](https://developer.apple.com/documentation/safari_release_notes/safari_12_1_release_notes)深色模式

* * *

> **编辑**（2019 年 9 月 5 日）：目前世界上 25% 的人可以使用深色模式 CSS。来源：[caniuse.com](https://caniuse.com/#search=prefers-color-scheme)
> 
> 即将推出的浏览器：
> 
> *   iOS 13（我猜它将在苹果主题演讲后下周发布）
> *   EdgeHTML 76（不确定何时发货）

* * *

> **编辑**（2019 年 11 月 5 日）：目前世界上 74% 的人可以使用深色模式 CSS。来源：[caniuse.com](https://caniuse.com/#search=prefers-color-scheme)

* * *

> **编辑**（2020 年 2 月 3 日）：Microsoft Edge 79 支持深色模式。 （2020 年 1 月 15 日发布）
> 
> 我的建议是：您应该考虑实施深色模式，因为大多数用户现在都可以使用它（对于您网站的夜间用户）。
> 
> **注意：**现在所有主流浏览器都支持深色模式，除了：IE、Edge

* * *

> **编辑**（2020 年 11 月 19 日）：目前世界上 88% 的人可以使用深色模式 CSS。来源：[caniuse.com](https://caniuse.com/#search=prefers-color-scheme)
> 
> CSS 框架[Tailwind CSS v2.0](https://tailwindcss.com/)支持深色模式。 （2020年11月18日发布）

* * *

> **编辑**（2020 年 12 月 2 日）：
> 
> Google Chrome 在开发工具中添加了深色主题模拟。来源：[developer.chrome.com](https://developer.chrome.com/blog/new-in-devtools-96/#auto-dark-mode)

* * *

> **编辑**（2022 年 5 月 2 日）：
> 
> 目前全球 90% 的人都可以使用深色模式 CSS。来源：[caniuse.com](https://caniuse.com/#search=prefers-color-scheme)

* * *

> **编辑**（2024 年 1 月 23 日）：
> 
> 目前全球 96.5% 的人都可以使用深色模式 CSS。来源：[caniuse.com](https://caniuse.com/#search=prefers-color-scheme)

如果你想从JS中检测它，可以使用以下代码：

    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        // dark mode
    }
    

要观察变化：

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
        const newColorScheme = e.matches ? "dark" : "light";
    });

规范已启动（见上文），可作为媒体查询使用。[某些内容](https://bugs.webkit.org/show_bug.cgi?id=186606)已经登陆 Safari，另请参阅[此处](https://github.com/WebKit/webkit/commit/46198bd7636f0d1f85e36d830fd3108707d4c169)。所以理论上你可以在 Safari/Webkit 中执行此操作：

    @media (prefers-dark-interface) { color: white; background: black }
    

[MDN 上提到了](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors)`inverted-colors`CSS媒体功能。 Plug：我[在这里](https://medium.freecodecamp.org/how-to-get-dark-mode-working-with-css-740ad31e22e)写了关于黑暗模式的博客。[](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors)[](https://medium.freecodecamp.org/how-to-get-dark-mode-working-with-css-740ad31e22e)

How to detect if the os is in dark mode in browsers

在CSS中，将颜色定义为变量可以使用CSS自定义属性，也常被称为CSS变量。这样做可以让你在多处重用同一颜色值，而且如果需要更改颜色，你只需要在一个地方更新定义即可。

下面是如何定义和使用CSS颜色变量的步骤：

1. 首先，在你的CSS文件的`:root`伪类中定义颜色变量。`:root`通常用于全局变量，因为它代表了文档树的根元素，即HTML元素。

```css
:root {
  --primary-color: #3498db;
  --accent-color: #e74c3c;
  --background-color: #ecf0f1;
}
```

2. 一旦定义了变量，你就可以在CSS文件的其他部分使用`var()`函数来引用这些变量。

```css
header {
  background-color: var(--primary-color);
}

button.accent {
  background-color: var(--accent-color);
}

body {
  background-color: var(--background-color);
}
```

在这个例子中，我们定义了三个颜色变量：主色调、强调色和背景色。然后我们在不同的CSS选择器中使用了这些变量，比如`header`、`button`类`.accent`和`body`。

这种方法的好处是，如果未来我们决定更改主题颜色，我们只需要在`:root`中更新变量值，CSS中使用这些变量的地方都会自动使用新的颜色值，使得维护和更新变得非常方便。

[CSS 通过CSS Variables](http://www.w3.org/TR/css-variables/)原生支持这一点。

**CSS 文件示例**

    :root {
        --main-color:#06c;
    }
    
    #foo {
        color: var(--main-color);
    }
    

有关工作示例，请参阅[此 JSFiddle](http://jsfiddle.net/Z4VWc/1/)（该示例显示小提琴中的 CSS 选择器之一将颜色硬编码为蓝色，另一个 CSS 选择器使用 CSS 变量（原始语法和当前语法）将颜色设置为蓝色） 。

**在 JavaScript/客户端操作 CSS 变量**

    document.body.style.setProperty('--main-color',"#6c0")
    

**所有现代浏览器都支持**

[Firefox 31+](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)、[Chrome 49+](https://www.chromestatus.com/features/6401356696911872)、[Safari 9.1+](https://developer.apple.com/library/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html)、[Microsoft Edge 15+](https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6261292-css-variables)和[Opera 36+](https://dev.opera.com/blog/opera-36/)附带对 CSS 变量的本机支持。

**[人们不断对我的答案进行投票，但与sass](http://sass-lang.com/)或[less](http://lesscss.org/)的乐趣相比，这是一个糟糕的解决方案，特别是考虑[到如今易于使用的 gui 的](https://www.google.co.uk/search?q=sass+or+less+gui)数量。如果您有任何理智，请忽略我下面建议的所有内容。**

您可以在CSS中的每种颜色之前添加注释，以充当一种变量，您可以使用查找/替换来更改它的值，所以...

在css文件的顶部

    /********************* Colour reference chart****************
    *************************** comment ********* colour ******** 
    
    box background colour       bbg              #567890
    box border colour           bb               #abcdef
    box text colour             bt               #123456
    
    */
    

稍后在 CSS 文件中

    .contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}
    

然后，例如，更改您执行查找/替换的框文本的颜色方案

    /*bt*/#123456

**Yeeeaaahhh ....您现在可以在****CSS**中使用**var(** ) 函数.. ...

好消息是您可以使用**JavaScript**访问来更改它，这也会在全局范围内更改......

但如何声明它们...

这很简单：

例如，你想将 a 分配`#ff0000`给 a `var()`，只需将其分配在 中即可`:root`，还要注意`--`：

    :root {
        --red: #ff0000; 
    }
    
    html, body {
        background-color: var(--red); 
    }
    

好处是浏览器支持还不错，也不需要编译就可以在浏览器中使用，比如`LESS`或`SASS`...

[![浏览器支持](https://i.stack.imgur.com/vl3g6.png)](https://i.stack.imgur.com/vl3g6.png)

另外，这里有一个简单的 JavaScript 脚本，它将红色值更改为蓝色：

    const rootEl = document.querySelector(':root');
    root.style.setProperty('--red', 'blue');

CSS 本身不使用变量。但是，您可以使用另一种语言（例如[SASS）](http://sass-lang.com/)来使用变量定义样式，并自动生成 CSS 文件，然后将其发布到网络上。请注意，每次更改 CSS 时都必须重新运行生成器，但这并不难。

您可以尝试[CSS3 变量](http://www.w3.org/TR/css-variables/)：

    body {
      --fontColor: red;
      color: var(--fontColor);
    }

How can i define colors as variables in css

为了隐藏HTML中图像损坏的图标，可以使用CSS的伪元素来覆盖默认的图像损坏图标。以下是一个常用的方法，它利用了`::before`或`::after`伪元素来实现。

```css
img {
  /* 当图像未能加载时，将其内容设置为空 */
  display: block;
  font-family: 'arial';
  color: transparent;
  width: 200px; /* 设置为你希望的宽度 */
  height: 200px; /* 设置为你希望的高度 */
}

img::before {
  /* 在图像位置展示的内容，这里使用空内容来隐藏损坏的图标 */
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #ccc; /* 可以使用其他颜色或背景图案 */
}

img:not([src]), img[src=""] {
  visibility: hidden;
}
```

此代码块做了以下几件事情：

1. **设置图像尺寸**：`width`和`height`属性用于指定图像的占位大小。

2. **隐藏损坏的图标**：使用`img::before`创建一个伪元素，`content`属性设置为空字符串，这将覆盖默认的图像损坏图标。

3. **设置一个备用背景**：可以通过`background`属性设置一个颜色或者图案，作为图像损坏时的背景。这是可选的，如果你不希望有任何东西显示，可以省略这一步。

4. **隐藏没有`src`的图像**：`img:not([src]), img[src=""]`选择器用来选中那些没有`src`属性或者`src`为空字符串的`img`元素，并将其`visibility`属性设置为`hidden`，以确保这些元素不会在页面上显示。

请注意，这种方法的效果可能依赖于不同浏览器的实现以及图像损坏时浏览器的默认行为。此外，如果你希望支持屏幕阅读器用户，隐藏图像的同时请确保使用适当的`alt`文本描述，以便屏幕阅读器仍然可以提供图像的信息。

CSS/HTML 无法知道图像链接是否已损坏，因此无论如何您都必须使用 JavaScript

但这里有一个隐藏图像或用备份替换源的最小方法。

    <img src="Error.src" onerror="this.style.display='none'"/>
    

或者

    <img src="Error.src" onerror="this.src='fallback-img.jpg'"/>
    

更新
--

您可以通过执行以下操作将此逻辑一次应用于多个图像：

    document.addEventListener("DOMContentLoaded", function(event) {
       document.querySelectorAll('img').forEach(function(img){
      	img.onerror = function(){this.style.display='none';};
       })
    });

    <img src="error.src">
    <img src="error.src">
    <img src="error.src">
    <img src="error.src">

运行代码片段Hide results

展开片段

更新2
---

对于**CSS 选项，**请参阅下面[michalzuber 的回答](https://stackoverflow.com/a/37192970/484780)。您无法隐藏整个图像，但可以更改损坏图标的外观。

不管人们在这里怎么说，你根本不需要 JavaScript，甚至不需要 CSS！

实际上，仅使用 HTML 就非常可行且简单。  
**如果图像未加载，您甚至可以显示默认图像**。就是这样...

这也适用于所有浏览器，甚至早到 IE8（在 2015 年 9 月我托管的网站的 250,000 多名访问者中，**零**个人使用了比 IE8 更糟糕的浏览器，这意味着该解决方案几乎适用于**所有浏览器**）。

步骤 1：将图像引用为**对象**而不是**img**。当对象失败时，它们不会显示损坏的图标；他们只是什么都不做。从 IE8 开始，您可以互换使用 object 和 img 标签。您还可以调整大小并使用常规图像做所有您可以做的事情。不要害怕对象标签；它只是一个标签，不会加载任何大而笨重的东西，也不会减慢任何东西。您只需使用另一个名称的 img 标签即可。速度测试表明它们的使用方式相同。

第 2 步：（**可选，但非常棒）**将默认图像粘贴到该对象内。如果您想要的图像实际加载_到对象中_，则默认图像将不会显示。例如，您可以显示用户头像列表，如果某人在服务器上还没有图像，它可以显示占位符图像...根本不需要 JavaScript 或 CSS，但您可以获得以下功能大多数人都需要 JavaScript。

这是代码...

    <object data="avatar.jpg" type="image/jpeg">
        <img src="default.jpg" />
    </object>
    

……是的，就是这么简单。

如果你想用 CSS 实现默认图像，你可以在 HTML 中使其变得更简单，如下所示......

    <object class="avatar" data="user21.jpg" type="image/jpeg"></object>
    

...只需添加此答案中的 CSS -> [https://stackoverflow.com/a/32928240/3196360](https://stackoverflow.com/a/32928240/3196360)

[在https://bitsofco.de/styling-broken-images/](https://bitsofco.de/styling-broken-images/)找到了一个很好的解决方案[](https://bitsofco.de/styling-broken-images/)

    img {  
      position: relative;
    }
    
    /* style this to fit your needs */
    /* and remove [alt] to apply to all images*/
    img[alt]:after {  
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      font-family: 'Helvetica';
      font-weight: 300;
      line-height: 2;  
      text-align: center;
      content: attr(alt);
    }

    <img src="error">
    <br>
    <img src="broken" alt="A broken image">
    <br>
    <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">

运行代码片段Hide results

展开片段

如果您添加带有文本**alt="abc"**的 alt ，它将显示显示损坏的缩略图，以及 alt 消息 abc

    <img src="pic_trulli.jpg" alt="abc"/>
    

[![第一名](https://i.stack.imgur.com/llfn8.jpg)](https://i.stack.imgur.com/llfn8.jpg)

如果您不添加 alt，它将显示“显示损坏的缩略图”

    <img src="pic_trulli.jpg"/>
    

[![第二名](https://i.stack.imgur.com/iEFO5.jpg)](https://i.stack.imgur.com/iEFO5.jpg)

如果你想隐藏损坏的，只需添加**alt=""**它不会显示损坏的缩略图和任何 alt 消息（不使用 js）

    <img src="pic_trulli.jpg" alt=""/>
    

如果你想隐藏损坏的，只需添加**alt="" & onerror="this.style.display='none'"**它不会显示损坏的缩略图和任何 alt 消息（带有 js）

    <img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>
    

第四个有点危险（不完全是），如果你想在onerror事件中添加任何图像，即使图像存在，它也不会显示，因为style.display就像添加一样。因此，当您不需要显示任何替代图像时，请使用它。

    display: 'none'; // in css
    

如果我们在 CSS 中给出它，那么该项目将不会显示（如 image、iframe、div 等）。

如果你想显示图像并且你想在错误时显示完全空白，那么你可以使用，但也要小心这不会占用任何空间。所以，你需要将它保存在 div 中

链接[https://jsfiddle.net/02d9yshw/](https://jsfiddle.net/02d9yshw/)

我认为最简单的方法是通过文本缩进属性隐藏损坏的图像图标。

    img {
        text-indent: -10000px
    }
    

显然，如果你想看到“alt”属性，这是行不通的。

How to hide image broken icon using only css

在CSS中更改SVG路径的填充颜色通常是通过使用`fill`属性来实现的。首先，你需要确保你的SVG图像是以内联的形式嵌入在HTML中的，因为对于外部引用的SVG文件，CSS可能无法直接影响其样式。

下面是一个简单的例子，演示了如何使用CSS来更改SVG路径的填充颜色：

假设你有以下的SVG代码嵌入在HTML中：

```html
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 h 80 v 80 h -80 Z" />
</svg>
```

在这个SVG中，我们有一个`<path>`元素，它绘制了一个简单的正方形路径。默认情况下，这个路径没有填充颜色。

现在，我们来添加一些CSS来更改这个路径的填充颜色：

```css
svg path {
  fill: #ff0000; /* 设置填充颜色为红色 */
}
```

将这个CSS规则添加到你的样式表中，或者放在`<style>`标签内直接嵌入在HTML中，它会将所有SVG内的`<path>`元素的填充颜色更改为红色。

这个例子展示了一个更改所有SVG路径颜色的通用方法，但你也可以更具体地指定你想要更改颜色的SVG路径，比如使用类名：

HTML:

```html
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <path class="my-path" d="M10 10 h 80 v 80 h -80 Z" />
</svg>
```

CSS:

```css
svg .my-path {
  fill: #00ff00; /* 设置特定类名的路径填充颜色为绿色 */
}
```

在这个例子中，只有类名为`my-path`的SVG路径的填充颜色会被更改为绿色。这种方法能够让你有选择性地更改特定元素的样式，而不影响其他元素。

是的，您可以将 CSS 应用于 SVG，但您需要匹配元素，就像设置 HTML 样式一样。如果您只想将其应用于所有 SVG 路径，您可以使用，例如：

    ​path {
      fill: blue;
    }​
    

外部 CSS 似乎会覆盖路径的`fill`属性，至少在我测试的基于 WebKit 和 Gecko 的浏览器中是这样。当然，如果你这样写，那么`<path style="fill: green">`它也会覆盖外部 CSS。

如果您想通过将鼠标悬停在元素中来更改颜色，请尝试以下操作：

    path:hover{
      fill:red;
    }

**2021 年 4 月编辑**

如果您进入 SVG 文件的源代码，您可以通过修改填充属性来更改颜色填充。

    <svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    </svg> 
    

使用您最喜欢的文本编辑器，打开 SVG 文件并使用它。

我想出了另一种从 SVG 外部更改颜色的方法，那就是导入 SVG 内容并删除声明填充的样式规则。然后从 CSS 样式表中控制填充。

        <svg width="100%" height="100%" viewBox="0 0 167 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g id="Pic_icon"><path id="Pic_icon1" serif:id="Pic_icon" d="M166.667,0l-166.667,0l0,133.333l166.667,0l-0,-133.333Zm-158.276,70.89l32.771,-33.148l48.814,49.375l31.519,-19.575l36.781,32.176l-0,-91.3l-149.885,0l-0,62.472Zm84.426,-36.017c11.25,0 20.384,9.164 20.384,20.451c0,11.287 -9.134,20.451 -20.384,20.451c-11.25,0 -20.384,-9.164 -20.384,-20.451c0,-11.287 9.134,-20.451 20.384,-20.451Z" /></g></svg>
    

然后在我的 CSS 文件中我进行以下操作：

        svg{ fill: green; }
    

现在，您正在从 SVG 中删除更高层次结构的填充声明，外部的声明将获得控制。

这对我来说完全没有问题。

**放入所有 svg：**

    fill="var(--svgcolor)"
    

* * *

**在 CSS 中：**

    :root {
      --svgcolor: tomato;
    }
    

**使用伪类：**

    span.github:hover {
      --svgcolor:aquamarine;
    }
    

* * *

**解释**

根= html 页面。  
\--svgcolor = 变量。  
span.github = 选择一个带有 github 类的 span 元素，内部有一个 svg 图标并分配伪类悬停。

你把这个 css 放在 svg 圆圈中。

    svg:hover circle{
        fill: #F6831D;
        stroke-dashoffset: 0;
        stroke-dasharray: 700;
        stroke-width: 2;
    }

How to change the fill color of an svg path with css

在CSS中，“笑脸”不是一个官方的术语或者特性。不过，可能您提到的“笑脸”是指使用CSS代码来创造的一个笑脸图形。网页设计师和开发者可以通过CSS的各种属性，如`border-radius`、`background`、`box-shadow`等，来设计图形和图案，包括笑脸。

举个例子，要制作一个简单的CSS笑脸，我们可以使用以下的CSS代码：

```css
.smiley-face {
  width: 100px;
  height: 100px;
  background-color: yellow;
  border-radius: 50%;
  position: relative;
}

.smiley-face::before,
.smiley-face::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 30px;
}

.smiley-face::before {
  left: 25px;
}

.smiley-face::after {
  right: 25px;
}

.smiley-face .mouth {
  width: 60px;
  height: 20px;
  background-color: black;
  position: absolute;
  bottom: 20px;
  left: 20px;
  border-radius: 0 0 30px 30px;
}
```

同时，我们需要对应的HTML代码来实现这个笑脸：

```html
<div class="smiley-face">
  <div class="mouth"></div>
</div>
```

上述代码会生成一个简单的笑脸图形，其中`.smiley-face`类创建了一个黄色的圆形，用作脸；`::before`和`::after`伪元素创建了两个黑色的圆形作为眼睛；`.mouth`类创建了一个黑色的半圆形作为嘴巴。通过调整CSS属性，我们可以创作出各种表情和风格的笑脸。

What does the smiley face mean in css

在CSS中，`background`和`background-color`是两个有着不同用途的属性。

`background-color`属性用于设置一个元素的背景颜色。它可以接受各种颜色值，比如颜色关键字、十六进制颜色代码、RGB或RGBA值、HSL或HSLA值等。例如：

```css
div {
  background-color: #ff0000; /* 设置背景颜色为红色 */
}
```

另一方面，`background`是一个复合属性，它可以同时设置多个背景相关的属性值，包括`background-color`、`background-image`、`background-repeat`、`background-position`和`background-size`等。使用`background`属性可以让你一次性设置所有这些背景属性。例如：

```css
div {
  background: #ff0000 url('image.jpg') no-repeat center center / cover;
}
```

在上面的例子中，`#ff0000`设置了背景颜色，`url('image.jpg')`设置了背景图片，`no-repeat`指定图片不重复，`center center`指定了图片的位置，而`/ cover`则指定背景图片覆盖整个元素的区域。

使用`background`属性是一种简写方式，它可以减少代码的冗余性并提供更为清晰的代码。不过，有时我们只需要设置背景颜色，这时使用`background-color`更为直接和简单。另外，如果我们想要分别修改背景的某个特定属性，而不影响其他背景属性，使用单独的属性如`background-color`、`background-image`等更合适。

假设这是两个不同的属性，在您的具体示例中，结果没有区别，因为[`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background)实际上是

>     background-color  
>     background-image  
>     background-position  
>     background-repeat  
>     background-attachment  
>     background-clip  
>     background-origin  
>     background-size
>     

因此，除了 之外[`background-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)，您还可以使用`background`简写添加一个或多个值，而无需 `background-*`多次重复任何其他属性。

选择哪一个基本上取决于您，但它也可能取决于样式声明的特定条件（例如，如果您需要在从父元素`background-color`继承其他相关`background-*`属性时覆盖，或者如果您需要删除所有值除了`background-color`）。

`background`将取代所有以前的`background-color`、`background-image`等规格。它基本上是一个简写，但也是一个**重置。**

我有时会用它来覆盖`background`模板自定义中的先前规范，我需要以下内容：

`background: white url(images/image1.jpg) top left repeat;`

如下：

`background: black;`

因此，所有参数（`background-image`、`background-position`、`background-repeat`）将重置为其默认值。

关于**CSS 性能**：

**`background`**对比**`background-color`**：

> 比较在页面上以小矩形形式渲染 100 次的 18 个色样，一次使用**背景**，一次使用**背景颜色**。

![背景与背景颜色](https://i.stack.imgur.com/pO46S.png)

> 虽然这些数字来自单个页面重新加载，但随着后续刷新，渲染时间发生了变化，但每次的百分比差异基本相同。
> 
> 在 Safari 7.0.1 中使用背景而不是背景颜色时**，节省了近 42.6 毫秒，几乎是速度的两倍**。 Chrome 33 似乎也差不多。
> 
> 老实说，这让我震惊，因为在很长一段时间里有两个原因：
> 
> *   我通常总是主张 CSS 属性的明确性，尤其是背景，因为它可能会对未来的特异性产生不利影响。
> *   我认为当浏览器看到时`background: #000;`，他们就真的看到了`background: #000 none no-repeat top center;`。我这里没有资源链接，但我记得在某处读过这篇文章。

**参考： https:** [//github.com/mdo/css-perf#background-vs-background-color](https://github.com/mdo/css-perf#background-vs-background-color)

`background`您可以设置所有`background`属性，例如：

*   `background-color`
*   `background-image`  
    
*   `background-repeat`  
    
*   `background-position`  
    **_ETC。_**

* * *

您`background-color`可以只指定背景颜色

    background: url(example.jpg) no-repeat center center #fff;
    

_VS。_

    background-image: url(example.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fff;
    

* * *

[更多信息](http://www.w3schools.com/css/css_background.asp)
-------------------------------------------------------

**_（参见标题：背景 - 速记属性）_**

区别之一：

如果您以这种方式使用图像作为背景：

    background: url('Image Path') no-repeat;
    

那么你不能用“background-color”属性覆盖它。

但如果您使用背景来应用颜色，则它与背景颜色相同并且可以被覆盖。

例如： http: [//jsfiddle.net/Z57Za/11/](http://jsfiddle.net/Z57Za/11/)和[http://jsfiddle.net/Z57Za/12/](http://jsfiddle.net/Z57Za/12/)

What is the difference between background and background color

`:before` 是一个CSS伪元素，它用于在选择的元素内容的前面插入一些内容。通常，这个伪元素与 `content` 属性一起使用，可以插入文本、图标或其他装饰性内容。

然而，`:before` 伪元素对 `img` 标签不起作用，原因是 `img` 标签是一个替换元素（replacement element）。在HTML中，替换元素通常是指那些不是由CSS渲染的内容，而是由外部资源表示的元素。`img` 元素的内容不是由文档内容直接定义的，而是由它的 `src` 属性指定的外部资源定义的，比如一张图片。

CSS伪元素 `:before` 和 `:after` 是用来为元素的内容添加装饰性内容的，但它们只能应用于那些能够包含子内容的元素，比如 `div`、`span` 或者文本元素等。既然 `img` 元素没有子内容，它是自闭合的标签，并且它的内容是由外部引用定义的，所以是不能使用 `:before` 和 `:after` 伪元素的。

如果你想为图片添加装饰或额外的图形元素，你可以使用一个容器元素（比如 `div`），然后将 `img` 元素放入该容器内。之后，你可以对这个容器使用 `:before` 或 `:after` 伪元素来添加装饰内容。

例如，以下HTML和CSS代码演示了如何给图片添加一个简单的装饰边框：

```html
<div class="image-container">
  <img src="example.jpg" alt="示例图片" />
</div>
```

```css
.image-container {
  position: relative;
  display: inline-block;
}

.image-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid red;
  pointer-events: none; /* 防止伪元素捕获鼠标事件 */
}
```

在这个例子中，`.image-container` 就像是 `img` 的父容器，我们可以在它上面使用 `:before` 伪元素来创建一个边框效果，而这个边框会显示在图片的周围。这种方法允许开发者在图片周围添加虚拟的内容，比如边框、背景或者其他装饰物，而无需修改原始的 `img` 标签。这样的技术可以保持HTML结构的清晰和语义化，同时还能提供灵活的样式设计。

例如，如果你想给图片添加一个悬浮时显示的标题或标签，你可以这样做：

```html
<div class="image-wrapper">
  <img src="example.jpg" alt="示例图片" />
</div>
```

```css
.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper:before {
  content: "图片标题";
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.image-wrapper:hover:before {
  opacity: 1;
}
```

在上述代码中，当用户将鼠标悬浮在 `.image-wrapper` 包裹的图片上时，`before` 伪元素中定义的内容（"图片标题"）就会显示出来，作为图片的标题或者说明文字。这种方法同样不会影响到 `img` 元素本身，而是通过包裹元素和CSS伪元素来实现效果。

总的来说，对于不能直接应用 `:before` 和 `:after` 伪元素的替换元素，我们可以通过创造性的方法，例如使用包裹元素或者其他结构性的标签，来模拟出我们想要的效果。这样做的好处是不会对HTML的语义结构造成影响，同时还能保持样式的灵活性和扩展性。

不幸的是，大多数浏览器不支持在 img 标签上使用`:after`或。`:before`

[http://lildude.co.uk/after-css-property-for-img-tag](http://lildude.co.uk/after-css-property-for-img-tag)

然而，您可以使用 JavaScript/jQuery 来完成您所需要的任务。看看这个小提琴：

[http://jsfiddle.net/xixonia/ahnGT/](http://jsfiddle.net/xixonia/ahnGT/)

    $(function() {
    
        $('.target').after('<img src="..." />');
    
    });
    

**_编辑_**：

对于不支持此功能的原因，请查看[coreyward 的回答](https://stackoverflow.com/a/5843164/696056)。

before 和 after 伪选择器不插入 HTML 元素 — 它们在目标元素的现有内容之前或之后插入文本。因为图像元素不包含文本或有后代，所以它们都不`img:before`会对`img:after`您有任何好处。出于同样的原因，类似`<br>`和的元素也是如此。`<hr>`

我找到了一种在纯 css 中实现此功能的方法：

_我只是假内容_\-方法
============

启用 img:after 的纯 CSS 方法。

你可以查看**[CodePen：我只是假内容](http://codepen.io/TimPietrusky/pen/xpesA)**或者查看**来源**。

来源和片段
-----

    img {
        /* hide the default image */
        height:0;
        width:0;
    
        /* hide fake content */
        font-size:0;
        color:transparent;
    
        /* enable absolute position for pseudo elements */
        position:relative;
    
        /* and this is just fake content */
        content:"I'm just fake content";
    }
    
    /* initial absolute position */
    img:before,
    img:after {
        position:absolute;
        top:0;
        left:0;    
    }
    
    /* img:before - chrome & others */
    img:before {
        content:url(http://placekitten.com/g/250/250);
    }
    
    /* img:before - firefox */
    body:not(:-moz-handler-blocked) img:before {
        padding:125px;
        background:url(http://placekitten.com/g/250/250) no-repeat;
    }
    
    /* img:after */
    img:after {
        /* width of img:before */
        left:250px;
    
        content:url(http://lorempixel.com/350/200/city/1);
    }

    <img
        alt="You are watching the ~ I'm just fake content ~ method"  
    />

运行代码片段Hide results

展开片段

### 浏览器支持

✓ Chrome 10+

✓ 火狐 11+

✓ 歌剧 9.8+

✓ 野生动物园

### 没有支持

⊗ Internet Explorer 8 / 9

_请在其他浏览器中测试_

由于[`<img>`](https://www.w3.org/TR/html50/embedded-content-0.html#the-img-element)被[替换元素](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element)的性质，文档样式不会影响它。

无论如何要引用它，[`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)提供一个理想的本机包装器，可以附加伪元素，如下所示：

    img::after,
    picture::after{
        content:"\1F63B";
        font-size:larger;
        margin:-1em;
    }

    <img src="//placekitten.com/110/80">
    
    <picture>
        <img src="//placekitten.com/110/80">
    </picture>

运行代码片段Hide results

展开片段

这是另一种解决方案，使用 div 容器作为 img，同时使用`:hover::after`来实现效果。

HTML如下：

    <div id=img_container><img src='' style='height:300px; width:300px;'></img></div>
    

CSS如下：

    #img_container { 
        margin:0; 
        position:relative; 
    } 
    
    #img_container:hover::after { 
        content:''; 
        display:block; 
        position:absolute; 
        width:300px; 
        height:300px; 
        background:url(''); 
        z-index:1; 
        top:0;
    } 
    

要查看它的实际效果，请查看我创建的[小提琴](http://jsfiddle.net/D7C88/)。只是为了让您知道这是跨浏览器友好的，并且无需使用“虚假内容”来欺骗代码。

`:before` 是一个CSS伪元素，它用于在选择的元素内容的前面插入一些内容。通常，这个伪元素与 `content` 属性一起使用，可以插入文本、图标或其他装饰性内容。

然而，`:before` 伪元素对 `img` 标签不起作用，原因是 `img` 标签是一个替换元素（replacement element）。在HTML中，替换元素通常是指那些不是由CSS渲染的内容，而是由外部资源表示的元素。`img` 元素的内容不是由文档内容直接定义的，而是由它的 `src` 属性指定的外部资源定义的，比如一张图片。

CSS伪元素 `:before` 和 `:after` 是用来为元素的内容添加装饰性内容的，但它们只能应用于那些能够包含子内容的元素，比如 `div`、`span` 或者文本元素等。既然 `img` 元素没有子内容，它是自闭合的标签，并且它的内容是由外部引用定义的，所以是不能使用 `:before` 和 `:after` 伪元素的。

如果你想为图片添加装饰或额外的图形元素，你可以使用一个容器元素（比如 `div`），然后将 `img` 元素放入该容器内。之后，你可以对这个容器使用 `:before` 或 `:after` 伪元素来添加装饰内容。

例如，以下HTML和CSS代码演示了如何给图片添加一个简单的装饰边框：

```html
<div class="image-container">
  <img src="example.jpg" alt="示例图片" />
</div>
```

```css
.image-container {
  position: relative;
  display: inline-block;
}

.image-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid red;
  pointer-events: none; /* 防止伪元素捕获鼠标事件 */
}
```

在这个例子中，`.image-container` 就像是 `img` 的父容器，我们可以在它上面使用 `:before` 伪元素来创建一个边框效果，而这个边框会显示在图片的周围。
这种方法允许开发者在图片周围添加虚拟的内容，比如边框、背景或者其他装饰物，而无需修改原始的 `img` 标签。这样的技术可以保持HTML结构的清晰和语义化，同时还能提供灵活的样式设计。

例如，如果你想给图片添加一个悬浮时显示的标题或标签，你可以这样做：

```html
<div class="image-wrapper">
  <img src="example.jpg" alt="示例图片" />
</div>
```

```css
.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper:before {
  content: "图片标题";
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.image-wrapper:hover:before {
  opacity: 1;
}
```

在上述代码中，当用户将鼠标悬浮在 `.image-wrapper` 包裹的图片上时，`before` 伪元素中定义的内容（"图片标题"）就会显示出来，作为图片的标题或者说明文字。这种方法同样不会影响到 `img` 元素本身，而是通过包裹元素和CSS伪元素来实现效果。

总的来说，对于不能直接应用 `:before` 和 `:after` 伪元素的替换元素，我们可以通过创造性的方法，例如使用包裹元素或者其他结构性的标签，来模拟出我们想要的效果。这样做的好处是不会对HTML的语义结构造成影响，同时还能保持样式的灵活性和扩展性。

Why does before not work on img elements?

在网页上检查滚动条是否可见通常有几种方法，常见的是使用JavaScript或者通过CSS样式来判断。以下是几种检查滚动条是否可见的方法：

### 使用JavaScript

#### 方法1: 比较元素的高度

```javascript
function isScrollbarVisible(element) {
  return element.scrollHeight > element.clientHeight;
}

// 使用方法
let element = document.getElementById('myElement'); // 需要检查的元素
let scrollbarVisible = isScrollbarVisible(element);
console.log('滚动条是否可见:', scrollbarVisible);
```

#### 方法2: 计算元素的宽度差

```javascript
function isHorizontalScrollbarVisible(element) {
  return element.scrollWidth > element.clientWidth;
}

function isVerticalScrollbarVisible(element) {
  return element.scrollHeight > element.clientHeight;
}

// 使用方法
let element = document.getElementById('myElement'); // 需要检查的元素
let horizontalScrollbarVisible = isHorizontalScrollbarVisible(element);
let verticalScrollbarVisible = isVerticalScrollbarVisible(element);
console.log('水平滚动条是否可见:', horizontalScrollbarVisible);
console.log('垂直滚动条是否可见:', verticalScrollbarVisible);
```

### 使用CSS

通过CSS，您可以更改元素的 `overflow` 属性来控制滚动条的可见性。这不是一个检测滚动条是否已经可见的方法，而是确保在需要时显示或隐藏滚动条的方法。

```css
/* 总是显示垂直滚动条 */
.element-always-show-vertical-scrollbar {
  overflow-y: scroll;
}

/* 当需要时显示垂直滚动条 */
.element-auto-vertical-scrollbar {
  overflow-y: auto;
}

/* 隐藏垂直滚动条 */
.element-hide-vertical-scrollbar {
  overflow-y: hidden;
}

/* 对于水平滚动条，替换 'y' 为 'x' */
```

请注意，以上方法检测的是元素级别的滚动条是否可见。如果需要检测整个页面的滚动条，可以将 `element` 替换为 `document.body` 或者 `document.documentElement`。

一个小插件。

    (function($) {
        $.fn.hasScrollBar = function() {
            return this.get(0).scrollHeight > this.height();
        }
    })(jQuery);
    

像这样使用它，

    $('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..
    

已测试可在 Firefox、Chrome、IE6、7、8 上运行

`body`但在标签选择器上无法正常工作

[演示](http://jsfiddle.net/reigel/p3FFL/)
=======================================

* * *

编辑

我发现当水平滚动条导致垂直滚动条出现时，此功能不起作用......

我找到了另一个解决方案...使用`clientHeight`

    return this.get(0).scrollHeight > this.get(0).clientHeight;

[`Element.scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight)您可以使用和属性的组合来完成此操作[`Element.clientHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight)。

根据MDN：

> Element.scrollHeight只读属性是元素内容高度的度量，包括由于溢出而在屏幕上不可见的内容**。****scrollHeight 值等于元素所需的最小 clientHeight，以便在不使用垂直滚动条的情况下适应视点中的所有内容。**它包括元素内边距，但不包括其边距。

和：

> Element.clientHeight只读属性返回元素的内部高度（以像素为单位），包括填充，但不包括水平滚动条高度、边框或边距**。**
> 
> clientHeight 可以计算为 CSS 高度 + CSS 填充 - 水平滚动条的高度（如果存在）。

因此，如果滚动高度大于客户端高度，该元素将显示滚动条，因此您的问题的答案是：

    function scrollbarVisible(element) {
      return element.scrollHeight > element.clientHeight;
    }

也许是一个更简单的解决方案。

    if ($(document).height() > $(window).height()) {
        // scrollbar
    }

我应该对雷格尔所说的做一些修改：

    (function($) {
        $.fn.hasScrollBar = function() {
            return this[0] ? this[0].scrollHeight > this.innerHeight() : false;
        }
    })(jQuery);
    

insideHeight 计算控件的高度及其顶部和底部填充

这扩展了@Reigel 的答案。它将返回水平或垂直滚动​​条的答案。

    (function($) {
        $.fn.hasScrollBar = function() {
            var e = this.get(0);
            return {
                vertical: e.scrollHeight > e.clientHeight,
                horizontal: e.scrollWidth > e.clientWidth
            };
        }
    })(jQuery);
    

例子：

    element.hasScrollBar()             // Returns { vertical: true/false, horizontal: true/false }
    element.hasScrollBar().vertical    // Returns true/false
    element.hasScrollBar().horizontal  // Returns true/false

How can i check if a scrollbar is visible

当我们需要检查 `webkit-input-placeholder`的样式时，可以通过浏览器内置的开发者工具进行操作。以下是具体的步骤： 

1. 首先，使用浏览器打开包含有占位符文本（placeholder）的输入框（通常是 `<input>`或 `<textarea>`标签）的网页。
2. 接着，右键点击需要检查的输入框，并选择“检查”（Inspect）或者使用快捷键（如在Chrome中通常是 `Ctrl+Shift+I`或 `Cmd+Opt+I`）打开开发者工具。
3. 在开发者工具的元素（Elements）面板中，定位到相对应的输入框的HTML代码，确保它已经被选中。
4. 在样式（Styles）侧边栏，你通常可以看到元素的CSS样式。但是由于 `::placeholder`是一个伪元素，它的样式可能不会直接展现出来。
5. 要检查 `webkit-input-placeholder`的样式，我们需要在样式侧边栏中手动添加一个新的伪元素选择器。比如，如果你的输入框有一个类名为 `.my-input`，那么你可以添加如下样式规则来检查：

```css
.my-input::-webkit-input-placeholder {
    /* CSS 规则 */
}
```

6. 添加后，如果输入框有相应的 `placeholder`样式，它们将会出现在样式侧边栏中，你就可以检查和修改这些样式。例如，你可以更改文字的颜色、字体大小、字体样式等。
7. 如果你需要看到实时的变化，可以在开发者工具中直接编辑这些样式规则，并观察输入框中的占位符文本样式如何变化。

举例来说，如果我想要检查一个类名为 `.example-input`的输入框的占位符样式，并且想将其颜色改为灰色，我可以这样操作：

1. 右键点击对应的输入框，选择“检查”打开开发者工具。
2. 在Elements面板中找到 `<input class="example-input" placeholder="Enter text...">`这一行。
3. 在Styles侧边栏中，点击"+ New Style Rule"按钮。
4. 在新的样式规则中输入 `.example-input::-webkit-input-placeholder`。
5. 接着添加 `color: grey;`这一CSS属性。
6. 随即可以看到输入框中占位符的文字颜色变为了灰色。

通过这种方式，开发人员可以很方便地调试和定制占位符的样式，以满足设计的需求。这对于保证网页在不同浏览器中的一致性和提升用户体验来说非常重要。

我想到了。

诀窍是在 Chrome 开发者工具的“设置”面板中启用“显示用户代理影子 DOM”：

![在此输入图像描述](https://i.stack.imgur.com/zFIYW.png)

要进行设置，请单击开发工具面板右上角的齿轮图标，然后确保选择左侧的“首选项”选项卡，找到“元素”标题，然后选中下面的“显示用户代理影子 DOM”复选框标题。

这样，您现在可以看到它：

![在此输入图像描述](https://i.stack.imgur.com/7Y0C0.png)

1.  对于 Google Chrome 版本 69：
2.  打开检查元素：在 Mac 上 ⌘ + Shift + C，在 Windows / Linux 上 Ctrl + Shift + C 或 F12。
3.  点击右上角的“⋮”按钮，然后进入设置
4.  在设置中单击首选项 > 单击显示用户代理 Shadow DOM

下图显示了该过程：

转到设置 > 首选项：  
[![转到设置 > 首选项](https://i.stack.imgur.com/QH98H.jpg)](https://i.stack.imgur.com/QH98H.jpg)

单击显示用户代理 Shadow DOM：  
[![在此输入图像描述](https://i.stack.imgur.com/kVEKn.jpg)](https://i.stack.imgur.com/kVEKn.jpg)

查看placeholder的CSS：  
[![在此输入图像描述](https://i.stack.imgur.com/gOkUi.jpg)](https://i.stack.imgur.com/gOkUi.jpg)

How to inspect webkit input placeholder with developer tools

在HTML中，超链接（`a` 标签）默认会有特定的颜色，通常未访问的链接是蓝色，而访问过的链接是紫色。如果你想要删除或者改变这些默认颜色，可以使用CSS。

以下是一个简单的CSS示例来改变链接颜色：

```css
/* 未访问的链接 */
a:link {
    color: inherit; /* 这将使链接颜色继承父元素的颜色 */
    text-decoration: none; /* 这将移除下划线 */
}

/* 访问过的链接 */
a:visited {
    color: inherit; /* 同上 */
    text-decoration: none; /* 同上 */
}

/* 鼠标悬停状态 */
a:hover {
    color: inherit; /* 你可以在这里设置悬停时的颜色，或者保持继承 */
    text-decoration: underline; /* 在悬停时显示下划线，这是可选的 */
}

/* 鼠标激活点击状态 */
a:active {
    color: inherit; /* 你可以在这里设置点击时的颜色，或者保持继承 */
    text-decoration: none;
}
```

这段CSS代码可以应用到你的HTML文档的`<head>`部分或者一个外部的CSS文件中。`inherit`值意味着链接的颜色将不再是浏览器默认的蓝色或紫色，而是会继承其父元素的字体颜色。`text-decoration: none;`用于移除链接的下划线，但你可以根据需要来调整这些属性。

例如，如果你的HTML文档中有一个段落，你希望其中的链接没有默认的蓝色或紫色，看起来就像普通文本一样，你可以这样做：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 这里是之前提供的CSS代码 */
        a:link, a:visited, a:hover, a:active {
            color: inherit;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p style="color: black;">这是一个段落，里面有一个<a href="https://www.example.com">链接</a>，它看起来应该和其他文本一样。</p>
</body>
</html>
```

在这个例子中，`<a>` 标签内的文本将显示为与周围文本相同的颜色，并且没有下划线，除非鼠标悬停在链接上时，你可以设置显示下划线。这样，链接看起来就和普通的文本没有区别了。

简言之，通过使用CSS，你可以轻松地改变或删除超链接的默认颜色和下划线，以符合你的设计需求。

继承[值](https://developer.mozilla.org/en-US/docs/Web/CSS/inherit)：

    a { color: inherit; } 
    

...将导致该元素呈现其父级的颜色（这就是我认为您正在寻找的）。

现场演示如下：

显示代码片段

    a {
      color: inherit;
    }

    <p>The default color of the html element is black. The default colour of the body and of a paragraph is inherited. This
      <a href="http://example.com">link</a> would normally take on the default link or visited color, but has been styled to inherit the color from the paragraph.</p>

Run code snippetHide results

Expand snippet

尝试这样的事情：

    a {
        color: #0060B6;
        text-decoration: none;
    }
    
    a:hover {
        color:#00A0C6; 
        text-decoration:none; 
        cursor:pointer;  
    }
    

如果`text-decoration`不起作用，请将其更改为：

    text-decoration: none !important;
    

该`!important`规则会覆盖该属性的所有其他样式`text-decoration`。你可以[在这里](https://www.w3schools.com/css/css_important.asp)读更多关于它的内容。

如果您不想看到浏览器提供的下划线和默认颜色，可以将以下代码保留在 main.css 文件的顶部。如果您需要不同的颜色和装饰样式，您可以使用下面的代码片段轻松覆盖默认值。

     a, a:hover, a:focus, a:active {
          text-decoration: none;
          color: inherit;
     }

.cancela,.cancela:link,.cancela:visited,.cancela:hover,.cancela:focus,.cancela:active{
        color: inherit;
        text-decoration: none;
    }
    

我觉得有必要发布上面的类定义，SO上的许多答案都遗漏了一些状态

这也是可能的：

    a {
      all: unset;
    }
    

> unset：此关键字指示将应用于该元素或该元素的父元素的所有属性更改为它们的父值（如果它们是可继承的），否则更改为它们的初始值。 unicode-bidi 和方向值不受影响。

来源：[Mozilla 的所有描述](https://developer.mozilla.org/en-US/docs/Web/CSS/all)

在CSS中，您可以通过设置 `a` 标签的 `color` 属性来删除超链接的默认链接颜色。默认情况下，未访问的链接是蓝色的，而已访问的链接则是紫色的。如果您想要超链接看起来不像传统的链接，您可以指定一个颜色值，甚至可以将其设置为与文本相同的颜色。

以下是一段CSS代码，展示了如何为超链接设置不同状态下的颜色：

```css
/* 未访问的链接 */
a:link {
    color: black; /* 或者可以是任何颜色，例如#000000或者rgba(0,0,0,1) */
    text-decoration: none; /* 这会删除下划线 */
}

/* 已访问的链接 */
a:visited {
    color: black; /* 设置成和未访问链接一样的颜色 */
    text-decoration: none;
}

/* 鼠标悬浮在链接上 */
a:hover {
    color: gray; /* 或者你想要的任何颜色 */
    text-decoration: underline; /* 可选：鼠标悬浮时添加下划线 */
}

/* 鼠标点击链接的那一刻 */
a:active {
    color: red; /* 或者你想要的任何颜色 */
    text-decoration: none;
}
```

在上面的例子中，我将所有链接都设置成了黑色，并且移除了下划线，这样链接在视觉上就不再显示为传统的蓝色或紫色带下划线的文本。同时，我也添加了 `:hover` 和 `:active` 状态的样式，以便在用户与链接交互时提供视觉反馈。当然，您可以根据您的设计需求自由地修改这些属性值。

How do i remove the default link color of the html hyperlink a tag

在 CSS 中，我们可以使用伪元素和伪类来自定义 HTML 元素的滚动条样式。对于一个 `div` 元素，我们可以通过针对 `::-webkit-scrollbar` 及其相关伪元素来设置样式，这样可以允许我们控制滚动条的不同部分，比如滚动条本身、滚动条轨道和滚动条的滑块（thumb）。

这里是一个简单的例子，展示了如何自定义一个 `div` 的滚动条：

```css
/* 选择器指向 div 的滚动条 */
div::-webkit-scrollbar {
  width: 12px; /* 设置滚动条宽度 */
  background-color: #F5F5F5; /* 设置滚动条的背景颜色 */
}

/* 滚动条轨道 */
div::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; /* 在轨道内部加阴影效果 */
  border-radius: 10px; /* 设置轨道的圆角 */
}

/* 滚动条的滑块 */
div::-webkit-scrollbar-thumb {
  background: #888; /* 滑块颜色 */
  border-radius: 10px; /* 滑块圆角 */
}

/* 滑块悬浮效果 */
div::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滑块悬浮时的颜色变化 */
}
```

在上面的例子中，`div` 元素的滚动条宽度被设置为12像素，并且有一个灰色的背景。滚动条轨道有一个内部阴影和圆角，而滚动条的滑块则有不同的背景色和圆角。当鼠标悬停在滑块上时，滑块的颜色会变成更深的灰色。

需要注意的是这些样式主要适用于基于 WebKit 的浏览器，如 Chrome、Safari 等。对于其他浏览器，比如 Firefox，你需要使用不同的伪元素 `scrollbar-width` 和 `scrollbar-color`：

```css
/* Firefox 的滚动条样式 */
div {
  scrollbar-width: thin; /* 可以是 'auto', 'thin', 'none' */
  scrollbar-color: #888 #F5F5F5; /* 滑块颜色 和 轨道颜色 */
}
```

在实际项目中，考虑到不同浏览器的兼容性，我们可能需要结合使用前面提到的 WebKit 特定选择器和适用于其他浏览器的 CSS 属性来确保尽可能多的用户可以看到自定义的滚动条样式。

最后，随着 Web 标准的不断发展，自定义滚动条的方法可能会随着时间而发展变化，所以在实际应用中，我们需要参考最新的 CSS 标准和不同浏览器的支持情况。

我认为整合有关滚动条、CSS 和浏览器兼容性的最新信息会很有帮助。

滚动条 CSS 支持
==========

目前，不存在跨浏览器滚动条 CSS 样式定义。我在最后提到的[W3C 文章](https://www.w3.org/Style/Examples/007/scrollbars.en.html)有以下声明，并且最近更新了（2014 年 10 月 10 日）：

> 某些浏览器（IE、Konqueror）支持非标准属性“scrollbar-shadow-color”、“scrollbar-track-color”等。**这些属性是非法的：它们既没有在任何 CSS 规范中定义，也没有标记为专有（通过在它们前面加上“-vendor-”前缀）**

微软
--

正如其他人提到的，微软支持滚动条样式，但仅适用于 IE8 及更高版本。

例子：

    .TA {
        scrollbar-3dlight-color:gold;
        scrollbar-arrow-color:blue;
        scrollbar-base-color:;
        scrollbar-darkshadow-color:blue;
        scrollbar-face-color:;
        scrollbar-highlight-color:;
        scrollbar-shadow-color:
    }
    

Chrome 和 Safari (WebKit)
------------------------

同样，WebKit 现在也有自己的版本：

*   样式滚动条：[https://www.webkit.org/blog/363/styling-scrollbars/](https://www.webkit.org/blog/363/styling-scrollbars/)
    
*   [所有 WebKit 滚动条样式的演示](https://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html)
    
*   来自[WebKit 中的自定义滚动条](https://css-tricks.com/custom-scrollbars-in-webkit/)，相关 CSS：
    
         /* pseudo elements */
         ::-webkit-scrollbar              {  }
         ::-webkit-scrollbar-button       {  }
         ::-webkit-scrollbar-track        {  }
         ::-webkit-scrollbar-track-piece  {  }
         ::-webkit-scrollbar-thumb        {  }
         ::-webkit-scrollbar-corner       {  }
         ::-webkit-resizer                {  }
        
         /* pseudo class selectors */
         :horizontal
         :vertical
         :decrement
         :increment
         :start
         :end 
         :double-button
         :single-button
         :no-button
         :corner-present
         :window-inactive
        
    

火狐（壁虎）
------

从版本 64 开始，Firefox 通过属性`scrollbar-color`（部分为[W3C 草案](https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color)）和`scrollbar-width`（[W3C 草案](https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width)）支持滚动条样式。有关实施的一些有用信息可以在[此答案](https://stackoverflow.com/a/54101063/6396604)中找到。

跨浏览器滚动条样式
=========

JavaScript 库和插件可以提供跨浏览器解决方案。有很多选择。

*   [20 jQuery 滚动条插件示例](http://www.bestjquery.com/2012/07/jquery-scrollbar-plugin-examples/)（2012 年 7 月 24 日）
    *   [NiceScroll：适用于桌面、移动和触摸设备的 jQuery 滚动插件](https://code.google.com/p/jquery-nicescroll/)
    *   [jQuery 自定义内容滚动条](http://manos.malihu.gr/jquery-custom-content-scroller/)
    *   [Tiny Scrollbar – 一个轻量级的 jQuery 插件](http://www.bestjquery.com/?8OKI7cdR)
    *   ETC。
*   [30 多种用于滑块、滚动条和滚动条的 JavaScript/Ajax 技术](http://www.noupe.com/javascript/30-javascriptajax-techniques-for-sliders-scrollers-and-scrollbars.html)（2008 年 5 月 7 日）
*   [21 个有用的滚动条 CSS/JavaScript 样式教程](http://ginva.com/2012/08/21-useful-scrollbar-css-javascript-styling-tutorials/)（2012 年 8 月）
*   [15+ 个免费和高级 jQuery 滚动插件](http://designmodo.com/jquery-scrolling-plugins/)（2012 年 8 月 26 日）

这份名单可以继续使用。最好的选择是搜索、研究和测试可用的解决方案。我相信您一定能找到适合您需求的东西。

防止非法滚动条样式
=========

万一您想阻止未正确添加“-vendor”前缀的滚动条样式，[W3C 上的这篇文章提供了一些基本说明](https://www.w3.org/Style/Examples/007/scrollbars.en.html)。基本上，您需要将以下 CSS 添加到与您的浏览器关联的用户样式表中。这些定义将覆盖您访问的任何页面上无效的滚动条样式。

    body, html {
      scrollbar-face-color: ThreeDFace !important;
      scrollbar-shadow-color: ThreeDDarkShadow !important;
      scrollbar-highlight-color: ThreeDHighlight !important;
      scrollbar-3dlight-color: ThreeDLightShadow !important;
      scrollbar-darkshadow-color: ThreeDDarkShadow !important;
      scrollbar-track-color: Scrollbar !important;
      scrollbar-arrow-color: ButtonText !important;
    }
    

重复或类似的问题/上面未链接的来源
=================

*   [更改滚动条的样式](https://stackoverflow.com/questions/3203107/changing-the-scrollbars-style)
*   [CSS滚动条样式跨浏览器](https://stackoverflow.com/questions/7725652/css-scrollbar-style-cross-browser)
*   [如何在 div 上创建自定义滚动条（Facebook 风格）](https://stackoverflow.com/questions/9945547/how-to-create-a-custom-scrollbar-on-a-div)

**注意：**此答案包含来自各种来源的信息。如果使用了来源，那么它也会在此答案中链接。

尝试一下

来源： https: [//nicescroll.areaaperta.com/](https://nicescroll.areaaperta.com/)

实施简单

    <script type="text/javascript">
     $(document).ready(
    
      function() { 
    
        $("html").niceScroll();
    
      }
    
    );
    </script>
    

它是一个 jQuery 插件滚动条，因此您的滚动条是可控的，并且在各种操作系统中看起来都相同。

请检查此链接：  
[CSS 滚动条](https://codepen.io/GhostRider/pen/GHaFw)

工作演示示例

        #style-1::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
        }
        
        #style-1::-webkit-scrollbar
        {
            width: 12px;
            background-color: #F5F5F5;
        }
        
        #style-1::-webkit-scrollbar-thumb
        {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #555;
        }

CSS 无法实现自定义滚动条，您需要一些 JavaScript 魔法。

某些浏览器支持非规范 CSS 规则，例如`::-webkit-scrollbar`在 Webkit 中，但并不理想，因为它只能在 Webkit 中工作。 IE 也有类似的东西，但我认为他们不再支持它了。

像许多人一样，我一直在寻找以下东西：

*   在大多数现代浏览器中保持一致的样式和功能
*   不是一些可笑的 3000 行臃肿的 jQuery 扩展 cr\*p

...但是唉——什么也没有！

好吧，如果一项工作值得做……我就能在大约 30 分钟内启动并运行一些东西。免责声明：它有很多已知的（可能还有一些未知的）问题，但这让我想知道在许多产品中其他 2920 行 JS 到底有什么用！

    (window => {
    
      let initCoords;
    
      const coords_update = e => {
        if (initCoords) {
          const elem = initCoords.bar.closest('.scrollr');
          const eSuffix = initCoords.axis.toUpperCase();
          const sSuffix = initCoords.axis == 'x' ? 'Left' : 'Top';
          const dSuffix = initCoords.axis == 'x' ? 'Width' : 'Height';
          const max = elem['scroll' + dSuffix] - elem['client' + dSuffix];
          const room = elem['client' + dSuffix] - initCoords.bar['client' + dSuffix];
          const delta = e['page' + eSuffix] - initCoords.abs;
          const abs = initCoords.p0 + delta;
          elem['scroll' + sSuffix] = max * abs / room;
        }
      };
    
      const scrollr_resize = elem => {
        const xBar = elem.querySelector('.track.x .bar');
        const yBar = elem.querySelector('.track.y .bar');
        const xRel = elem.clientWidth / elem.scrollWidth;
        const yRel = elem.clientHeight / elem.scrollHeight;
        xBar.style.width = (100 * xRel).toFixed(2) + '%';
        yBar.style.height = (100 * yRel).toFixed(2) + '%';
      };
    
      const scrollr_init = elem => {
        const xTrack = document.createElement('span');
        const yTrack = document.createElement('span');
        const xBar = document.createElement('span');
        const yBar = document.createElement('span');
        xTrack.className = 'track x';
        yTrack.className = 'track y';
        xBar.className = 'bar';
        yBar.className = 'bar';
        xTrack.appendChild(xBar);
        yTrack.appendChild(yBar);
        elem.appendChild(xTrack);
        elem.appendChild(yTrack);
        elem.addEventListener('wheel', scrollr_OnWheel);
        elem.addEventListener('scroll', scrollr_OnScroll);
        xTrack.addEventListener('wheel', xTrack_OnWheel);
        xTrack.addEventListener('click', xTrack_OnClick);
        xTrack.addEventListener('mouseover', () => xTrack.classList.add('active'));
        xTrack.addEventListener('mouseout', () => {
          if (!initCoords) xTrack.classList.remove('active');
        });
        yTrack.addEventListener('click', yTrack_OnClick);
        yTrack.addEventListener('mouseover', () => yTrack.classList.add('active'));
        yTrack.addEventListener('mouseout', () => {
          if (!initCoords) yTrack.classList.remove('active');
        });
        xBar.addEventListener('click', bar_OnClick);
        xBar.addEventListener('mousedown', xBar_OnMouseDown);
        yBar.addEventListener('click', bar_OnClick);
        yBar.addEventListener('mousedown', yBar_OnMouseDown);
    
        scrollr_resize(elem);
      };
    
      window.addEventListener('load', e => {
        const scrollrz = Array.from(document.querySelectorAll('.scrollr'));
        scrollrz.forEach(scrollr_init);
      });
    
      window.addEventListener('resize', e => {
        const scrollrz = Array.from(document.querySelectorAll('.scrollr'));
        scrollrz.forEach(scrollr_resize);
      });
    
      window.addEventListener('mousemove', coords_update);
      window.addEventListener('mouseup', e => {
        initCoords = null;
        Array.from(document.querySelectorAll('.track.active'))
          .forEach(elem => elem.classList.remove('active'));
      });
    
      function xBar_OnMouseDown(e) {
        const p0 = this.offsetLeft;
        initCoords = {
          axis: 'x',
          abs: e.pageX,
          bar: this,
          p0
        };
      }
    
      function yBar_OnMouseDown(e) {
        const p0 = this.offsetTop;
        initCoords = {
          axis: 'y',
          abs: e.pageY,
          bar: this,
          p0
        };
      }
    
      function bar_OnClick(e) {
        e.stopPropagation();
      }
    
      function xTrack_OnClick(e) {
        const elem = this.closest('.scrollr');
        const xBar = this.querySelector('.bar');
        let unit = elem.clientWidth - 30;
        if (e.offsetX <= xBar.offsetLeft) unit *= -1;
        elem.scrollLeft += unit;
      }
    
      function yTrack_OnClick(e) {
        const elem = this.closest('.scrollr');
        const yBar = this.querySelector('.bar');
        let unit = elem.clientHeight - 30;
        if (e.offsetY <= yBar.offsetTop) unit *= -1;
        elem.scrollTop += unit;
      }
    
      function xTrack_OnWheel(e) {
        e.stopPropagation();
        const elem = this.closest('.scrollr');
        const left0 = elem.scrollLeft;
        const delta = e.deltaY !== 0 ? e.deltaY : e.deltaX;
        elem.scrollLeft += delta;
        const moved = left0 !== elem.scrollLeft;
        if (moved) e.preventDefault();
      }
    
      function scrollr_OnWheel(e) {
        const left0 = this.scrollLeft;
        const top0 = this.scrollTop;
        this.scrollLeft += e.deltaX;
        this.scrollTop += e.deltaY;
        const moved = left0 !== this.scrollLeft || top0 !== this.scrollTop;
        if (moved) e.preventDefault();
      }
    
      function scrollr_OnScroll(e) {
        const xTrack = this.querySelector('.track.x');
        const yTrack = this.querySelector('.track.y');
        const xBar = xTrack.querySelector('.bar');
        const yBar = yTrack.querySelector('.bar');
    
        const xMax = this.scrollWidth - this.clientWidth;
        const yMax = this.scrollHeight - this.clientHeight;
        const xFrac = this.scrollLeft / xMax;
        const yFrac = this.scrollTop / yMax;
        const xAbs = xFrac * (this.clientWidth - xBar.clientWidth);
        const yAbs = yFrac * (this.clientHeight - yBar.clientHeight);
    
        xTrack.style.left = this.scrollLeft + 'px';
        xTrack.style.bottom = -this.scrollTop + 'px';
        xBar.style.left = xAbs + 'px';
    
        yTrack.style.top = this.scrollTop + 'px';
        yTrack.style.right = -this.scrollLeft + 'px';
        yBar.style.top = yAbs + 'px';
      };
    
    })(window);

    .scrollr {
      overflow: hidden;
      position: relative;
    }
    
    .track {
      position: absolute;
      cursor: pointer;
      transition: background-color .3s;
      user-select: none;
    }
    
    .track.x {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 10px;
    }
    
    .track.y {
      top: 0;
      right: 0;
      height: 100%;
      width: 10px;
    }
    
    .bar {
      position: absolute;
      background-color: yellow;
      transition: background-color .3s, opacity .3s, width .3s, height .3s, margin .3s;
      display: block;
      width: 100%;
      height: 100%;
      opacity: .7;
    }
    
    .track.x .bar {
      min-width: 25px;
      height: 3px;
      margin: 5px 0 2px 0;
    }
    
    .track.y .bar {
      min-height: 25px;
      width: 3px;
      margin: 0 2px 0 5px;
    }
    
    .track.active {
      background-color: #ccc;
    }
    
    .track.active .bar {
      background-color: #999;
      margin: 0;
      opacity: 1;
    }
    
    .track.x.active .bar {
      height: 10px;
    }
    
    .track.y.active .bar {
      width: 10px;
    }
    
    
    /* Custom client stuff */
    
    .content {
      background: red;
    }
    
    .content p {
      width: 450px;
      margin: 0;
    }
    
    .scrollr {
      max-width: 350px;
      max-height: 150px;
    }

    <div class="scrollr content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
        vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
        dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
        vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
      <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
        Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
      <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
        Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
        vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
        dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
        vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
      <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
        Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
      <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
        Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
        vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
        dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
        vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
      <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
        Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
      <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
        Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
        vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
        dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
        vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
      <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
        Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
      <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
        Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
        vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
        dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
        vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
      <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
        Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
      <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
        Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
        vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
        dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
        vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
      <p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
        Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
      <p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
        Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
    </div>

运行代码片段Hide results

展开片段

How to using css to customized scroll bar in div

在CSS中，如果您想匹配所有class类名以特定字符串开头的元素，您可以使用属性选择器和一个特定的匹配模式。这个模式是`^=`，它用于选择属性值以指定内容开头的元素。

例如，假如您想匹配所有class名以`intro`开头的元素，您的CSS规则将如下所示：

```css
[class^="intro"] {
    /* CSS样式 */
}
```

在这个例子中，任何class属性值以`intro`开头的元素都会被选中，并应用这里定义的CSS样式。

需要注意的是，class属性可能包含多个值，比如`class="intro-text left-align"`。在这种情况下，上面的选择器就不会匹配到该元素，因为它期望`intro`是属性值的开头部分。

如果我们想确保即使在含有多个class值的情况下也能匹配，我们应该在属性选择器中加上空格，以匹配任何包含以特定字符串开头的class的元素。下面的CSS规则展示了如何这样做：

```css
[class^="intro"], [class*=" intro"] {
    /* CSS样式 */
}
```

在这里，第一个选择器 `[class^="intro"]` 是匹配任何以`intro`作为第一个class名的元素（例如`class="intro-text"`）。第二个选择器 `[class*=" intro"]`（注意class值前的空格）是为了匹配任何class属性中有一个以空格开头紧接`intro`的值的元素（例如`class="someclass intro-text"`）。

这种方法确保了无论`intro`出现在class属性值的哪个位置，只要它是一个独立的单词且以`intro`开始，该元素都会被选中并应用样式。

举个例子，如果我们想为所有以`intro`开头的class名的元素应用一个特定的背景颜色和字体样式，可以这样写：

```css
[class^="intro"], [class*=" intro"] {
    background-color: #f0f0f0;
    font-style: italic;
}
```

这段CSS会选择所有class名以`intro`开头的元素并给它们设置浅灰色背景和斜体字。

以下应该可以解决问题：

    div[class^='myclass'], div[class*=' myclass']{
        color: #F00;
    }
    

* * *

编辑：`*`按照 David 的建议添加通配符 ( )

这不是问题的直接答案，但我建议在大多数情况下简单地为每个元素设置多个类：

    <div class="myclass one"></div>
    <div class="myclass two"></div>
    <div class="myclass three"></div>
    

通过这种方式，您可以为所有`myclass`元素设置规则，然后为`one`、`two`和设置更具体的规则`three`。

    .myclass { color: #f00; }
    
    .two { font-weight: bold; }
    
    etc.

您可以轻松地向 div 添加多个类...所以：

    <div class="myclass myclass-one"></div>
    <div class="myclass myclass-two"></div>
    <div class="myclass myclass-three"></div>
    

然后在 CSS 中调用共享类来应用相同的样式：

    .myclass {...}
    

你仍然可以像这样使用其他类：

    .myclass-three {...}
    

或者如果你想在 CSS 中更具体，如下所示：

    .myclass.myclass-three {...}

在CSS中，如果您想匹配所有class类名以特定字符串开头的元素，您可以使用属性选择器和一个特定的匹配模式。这个模式是 `^=`，它用于选择属性值以指定内容开头的元素。 

例如，假如您想匹配所有class名以 `intro`开头的元素，您的CSS规则将如下所示：

```css
[class^="intro"] {
    /* CSS样式 */
}
```

在这个例子中，任何class属性值以 `intro`开头的元素都会被选中，并应用这里定义的CSS样式。

需要注意的是，class属性可能包含多个值，比如 `class="intro-text left-align"`。在这种情况下，上面的选择器就不会匹配到该元素，因为它期望 `intro`是属性值的开头部分。

如果我们想确保即使在含有多个class值的情况下也能匹配，我们应该在属性选择器中加上空格，以匹配任何包含以特定字符串开头的class的元素。下面的CSS规则展示了如何这样做：

```css
[class^="intro"], [class*=" intro"] {
    /* CSS样式 */
}
```

在这里，第一个选择器 `[class^="intro"]` 是匹配任何以 `intro`作为第一个class名的元素（例如 `class="intro-text"`）。第二个选择器 `[class*=" intro"]`（注意class值前的空格）是为了匹配任何class属性中有一个以空格开头紧接 `intro`的值的元素（例如 `class="someclass intro-text"`）。

这种方法确保了无论 `intro`出现在class属性值的哪个位置，只要它是一个独立的单词且以 `intro`开始，该元素都会被选中并应用样式。

举个例子，如果我们想为所有以 `intro`开头的class名的元素应用一个特定的背景颜色和字体样式，可以这样写：

```css
[class^="intro"], [class*=" intro"] {
    background-color: #f0f0f0;
    font-style: italic;
}
```

这段CSS会选择所有class名以 `intro`开头的元素并给它们设置浅灰色背景和斜体字。

所有问题