What is the writing order of css attributes?

CSS property writing order follows the following rules: importance statement (override existing styles) concreteness statement (for a specific element or pseudo-class) abbreviation value (a collection of multiple attribute values) Longhand attribute (expand abbreviation value) Values ​​(in the order defined in the CSS specification)

CSS property writing order

The writing order of CSS properties follows The following rules:

1. Importance declaration (optional)

• Use the !important declaration to overwrite the existing style and replace the Properties are given the highest priority.

2. Concreteness declaration

• targets a specific HTML element (for example, div.class) or a pseudo-class (for example, :hover) specifies the attribute.
• More specific statements will override less specific statements.

3. Abbreviated value (optional)

• Set multiple properties at the same time using a single property value.
• Abbreviated values ​​must be specified in order.

4. Longhand attribute

• After the abbreviated value is expanded, the corresponding longhand attribute will be specified in order.

5. Values

• The attribute values ​​themselves are written in the order they are defined in the CSS specification.

Example:

<code class="css">/* 重要性声明 */
div.important-class {
  /* 具体性声明 */
  border: 1px solid red !important; /* 重要性声明覆盖 */
  /* 缩写值 */
  background: #ccc padding: 10px; /* 缩写值按顺序指定 */
  /* Longhand 属性 */
  background-color: #ccc; /* Longhand 属性按顺序指定 */
  padding-top: 10px; /* Longhand 属性按顺序指定 */
}</code>

The above is the detailed content of What is the writing order of css attributes?. For more information, please follow other related articles on the PHP Chinese website!