Home > Article > Web Front-end > What are the three commonly used selectors in css?
What are the three commonly used selectors in css?
- 百草Original
- 2023-12-19 17:06:112200browse
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.
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;
}
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;
}
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;
}
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
descendant elements within the
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!