Getting Started with CSS 2-element shortcut keys

In the process of writing CSS code, the use of element shortcuts can greatly improve the efficiency of development, the following is the ELEMT shortcut in the Webstorm Editor:

I. Subset relationship: ">"

1. Writing format: Parent element > child element;

2. Example:div>p;

Second, the element self-increment: "*"

1, writing format: element * number of elements;

2. Example:div>p;

Iii. brotherly relations: "+"

1, writing format: element + element number;

2, example: div+p;

Iv. creating a parent element: "^"

1. Writing format: child element ^ parent element;

2, example: P^div;

V. Group: "()"

1. Writing format: (parent element > child element)--

2, example: P^div;

Six, class name fast: "."

1, writing format: element. class name;

2, example: P.box;

Seven, the class name fast: "#"

1, writing Format: element # class name;

2, example: P#box;

Viii. class name Increment 1 (order, add a bit): "$"

1, writing Format: element. The number of class name $*;

2, example: p.box$*5;

Ninth, class name Increment 2 (order, increase two bit): "$$"

1, writing Format: element. The number of class name $$*;

2, example: p.box$$*5;

X. Class name Self-increment 3 (reverse): "@-"

1, writing Format: element. The number of class name @-*;

2, example: [Email protected]*5;

Xi. class name self-increment 4 (Set start value): "[Email protected]"

1. Writing format: Elements. class name [email protected] Start value * number;

2, example: [Email protected]*5;

12, class name, ID name combination shortcut

1. Writing format: element. class name #id name;

2, example: P.box#main;

13. Property shortcut keys

1, writing format: element name [Property name = "attribute value"];

2, example: input[title= "Hello"];

14. Add element content: "{}"

1. Writing format: element name {element content}

2. Example: div{Hello}

Getting Started with CSS 2-element shortcut keys