The three commonly used selectors in css are: 1. Element selector; 2. Class selector; 3. ID selector. Detailed introduction: 1. Element selector, which is the most basic selector. It selects elements according to the tag name of HTML elements; 2. Class selector, uses "." to select elements with specific classes. The class name can It is any alphanumeric character, but it must start with a letter; 3. ID selector, use "#" to select elements with a specific ID. The ID should be unique, that is, each ID can only correspond to one element, etc.

What are the three commonly used selectors in css?

The operating system for this tutorial: Windows 10 system, DELL G3 computer.

Three commonly used selectors in CSS include:

1. Element selector: This is the most basic selector, which selects based on the tag name of the HTML element element. For example, the p selector selects all

elements on the page.

p {  
  color: red;  
}

Copy after login

The above style will set the text color of all

elements on the page to red.

2. Class selector: The class selector uses . to select elements with a specific class. The class name can be any alphanumeric character, but must start with a letter. For example, the .my-class selector will select all elements with the my-class class.

.my-class {  
  background-color: yellow;  
}

Copy after login

The above style will set the background color of all elements with my-class class to yellow.

3. ID selector: The ID selector uses # to select elements with a specific ID. IDs should be unique, that is, each ID can only correspond to one element. For example, the #my-id selector selects the element with the ID my-id.

#my-id {  
  font-size: 20px;  
}

Copy after login

The above style will set the font size of the element with ID my-id to 20 pixels.

These three selectors are the most commonly used in CSS. They can be used alone or in combination to achieve more complex selection and styling.

In addition to the above three commonly used selectors, CSS also has many other types of selectors, such as:

1. Attribute selector: This kind of selector can Select elements based on their attributes and values.

2. Pseudo-class selector: Pseudo-class selector is used to select elements in a specific state, such as mouseover, clicked, focus, etc. For example, the :hover selector selects the element that the mouse is hovering over.

3. Child elements and descendant selectors: These selectors can select child elements or descendant elements of an element. For example, div > p will select all direct

children of the

element, while div p will select all

descendant elements within the

element.

4. Group selector: The group selector allows you to select multiple elements, classes or IDs at the same time and apply the same style to them. For example, the h1, h2, p selector will select all

,

, and
elements at the same time.

These selectors provide a rich selection method, allowing developers to accurately locate any element in the page and apply the desired style to it. At the same time, understanding and mastering these selectors is also the key to becoming a CSS master.
The above is the detailed content of What are the three commonly used selectors in css?. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

css Selector

source：php.cn

Previous article：Why is position blocked? Next article：What is the difference between flutter and uniapp

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn