What is a class selector in web front-end

The class selector in the web front-end is to find the selector with the class name tag on the page through the class name; the class selector is used to define the same presentation method for a series of tags. The commonly used syntax is ".class" Name {css attribute name: attribute value;}"; the class name can be composed of numbers, letters, underscores, and underscores, but it cannot start with numbers or underscores.

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What is a class selector in the web front-end

Class selector. Class selector is used to define the same presentation method for a series of tags. The commonly used syntax is .classValue{property:value}. Where classValue is the name of the class selector, which is named by the css writer himself.

Class selector

Structure:

Function:

Through the class name, find all the tags with this class name on the page and set the style

Notes:

• There is a class attribute on all tags. The attribute value of the class attribute is called the class name (similar to a name)

• The class name can be composed of numbers, letters, underscores, and underscores. But it cannot start with a number or a dash

• A tag can have multiple class names at the same time, and the class names are separated by spaces

• Class names can be repeated, and a class selector can select multiple tags at the same time

##Expand knowledge

What are the commonly used selectors on the web front-end

The first is the label selector, which is also called the element selector. The basic form of the tag selector is as follows: tagName{property:value}, where tagName is the tag name and property is the css attribute.

The second type is the class selector. The class selector is used to define the same presentation method for a series of tags. The commonly used syntax is .classValue{property:value}. Where classValue is the name of the class selector, which is named by the css writer himself.

The third type is the ID selector. The ID selector defines a specific html element. Only one tag or element in a web page uses the attribute value of a certain ID. The basic syntax format of the ID selector is as follows:

#idValue{property:value}. where idValue is the name of the ID selector, which can be written by the CSS writer himself.

The fourth type is the global selector. The global selector works on all htmlz elements. The syntax format is: *{propery:value}. Among them, "*" means it works on all elements, property means the CSS attribute, and value means the attribute value.

The fifth type is the combined selector, which is to combine multiple selectors to form a composite selector, also called a combined selector.

The sixth method is to inherit the selector. The rule of inheritance is that the child tag inherits the selector of the parent tag if it is not defined; when the child tag repeatedly defines the statement of the parent tag, the child tag selection is performed. device.

The seventh type is the pseudo-class selector. The pseudo-class selector is mainly used on labels. It has four states: unvisited link (link), visited link (visited), and activated link (active). , the mouse stays on the connection (hover).

【Related recommendations:

javascript video tutorial, web front-end】

The above is the detailed content of What is a class selector in web front-end. For more information, please follow other related articles on the PHP Chinese website!