What css style selectors are there?

css style selectors include: 1. Element selector; 2. Class selector; 3. ID selector; 4. Descendant selector; 5. Child element selector; 6. Adjacent sibling selector. ;7. Attribute selector; 8. Pseudo-class selector; 9. Pseudo-element 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 a specific class; 3. ID selection filter, use "#" to select elements with specific IDs, etc.

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

CSS style selector, also known as CSS attribute selector, is used to indicate the object of CSS style, that is, which elements in the web page the style is applied to. Each CSS style declaration (definition) consists of two parts, with the following form: selector {style}. The part before {} is the "selector". There are many types of selectors in CSS, such as tag name selectors, class selectors, ID selectors, derived selectors, child element selectors, group selectors, etc. By using these selectors, developers can achieve one-to-one, one-to-many or many-to-one control over elements in HTML pages.

There are many types of CSS style selectors. The following are some of the main types:

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

2. Class selector: The class selector uses . to select elements with a specific class. For example, the .my-class selector will select all elements with the class name my-class.

3. ID selector: The ID selector uses # to select elements with a specific ID. For example, the #my-id selector selects the element with the ID my-id.

4. Descendant selector: The descendant selector can select the descendant elements of a certain element. For example, the div p selector will select all p elements inside a div element.

5. Child element selector: The child element selector can select the direct child elements of an element. For example, the div > p selector selects all p elements that are direct children of the div element.

6. Adjacent sibling selector: The adjacent sibling selector can select the next sibling element of an element. For example, the div p selector selects all p elements immediately following a div element.

7. Attribute selector: Attribute selector can select elements based on their attributes. For example, the [attr=value] selector selects all elements with an attribute named attr and a value of value.

8. Pseudo-class selector: Pseudo-class selector can select the specific state of the element, such as mouse hover state, clicked state, etc. For example, the :hover pseudo-selector selects elements when the mouse is hovering over them.

9. Pseudo-element selector: The pseudo-element selector can select a specific part of the element, such as the first letter, the first line, etc. For example, the ::first-letter pseudo-element selector selects the first letter of each element.

The above are commonly used style selectors in CSS. They can be used alone or in combination to achieve more complex style settings.

The above is the detailed content of What css style selectors are there?. For more information, please follow other related articles on the PHP Chinese website!