Home > Article > Web Front-end > What selectors are there in html5
What selectors are there in html5
- 百草Original
- 2023-10-07 15:11:181594browse
html5 selectors include element selector, class selector, ID selector, attribute selector, pseudo-class selector, pseudo-element selector, descendant selector, child element selector, adjacent sibling selector selector and universal sibling selector, etc. Detailed introduction: 1. Element selector, using the element name as the selector, means selecting all elements with the element name; 2. Class selector, using the selector starting with a dot, means selecting elements with the specified class name; 3. , ID selector, use the selector starting with the pound sign to select the element with the specified ID, etc.
The operating system for this tutorial: Windows 10 system, DELL G3 computer.
HTML5 does not introduce new selector types, it still uses CSS selectors to select and operate HTML elements. Various selectors defined in CSS2 and CSS3 can still be used in HTML5. The following are common selector types in HTML5:
1. Element Selector: Using the element name as the selector means selecting all elements with that element name. For example, `p` means to select all `
` elements.
2. Class Selector: Use a selector starting with a period (.) to select elements with a specified class name. For example, `.red` means to select all elements with the class name "red".
3. ID Selector: Use the selector starting with the pound sign (#) to select the element with the specified ID. For example, `#header` means selecting the element with the ID "header".
4. Attribute Selector: Use square brackets ([]) to select elements with specified attributes. For example, `[href]` means to select all elements with href attribute.
5. Pseudo-class Selector: Use a selector starting with a colon (:) to select elements that meet a certain status or condition. For example, `:hover` indicates the selection state when the mouse is hovering over the element.
6. Pseudo-element Selector: Use a selector starting with a double colon (::) to select a specific part of the element. For example, `::before` indicates the content inserted before the selected element.
7. Descendant Selector: Use a space-separated selector to select the descendant elements of an element. For example, `div p` means to select all `
` elements that are descendants of `
8. Child Selector: Use a selector separated by a greater than sign (>) to select the direct child elements of an element. For example, `div > p` means to select all `
` elements that are direct children of the `
9. Adjacent Sibling Selector: A selector separated by a plus sign ( ), indicating that the first sibling element immediately following an element is selected. For example, `h1 p` means selecting the first `
` element immediately following the `
` element.
10. General Sibling Selector: A selector separated by a tilde (~) to select all sibling elements following an element. For example, `h1 ~ p` means selecting all `
` elements after the `
` element.
The above are common selector types in HTML5. They can select and operate HTML elements based on the element's name, class name, ID, attributes, status, position and other conditions. By rationally using these selectors, we can accurately select and style elements in HTML documents, achieve rich and diverse effects, and improve the interactivity and visual appeal of web pages.
The above is the detailed content of What selectors are there in html5. For more information, please follow other related articles on the PHP Chinese website!