What are the filter selectors?

Filter selectors include: first-child, :last-child, :nth-child, :nth-last-child, :only-child, :not, :empty, :checked, :enabled, : disabled and :focus etc. Detailed introduction: 1. :first-child, selects the first child element under the parent element; 2. :last-child, selects the last child element under the parent element, etc.

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

In web development, filter selectors are used to filter and select DOM elements based on specific conditions or rules. Filter selectors can help developers select specific elements for manipulation, style modification, or other processing as needed. The following are common filter selectors:

1. :first-child: Select the first child element under the parent element. For example, select the first child element under all parent elements:

   :first-child {
     /* 样式 */
   }

2. :last-child: Select the last child element under the parent element. For example, select the last child element under all parent elements:

   :last-child {
     /* 样式 */
   }

3. :nth-child(n): Select the nth child element under the parent element. The value of n can be specified using specific numbers or formulas. For example, select the 3rd child element under the parent element:

   :nth-child(3) {
     /* 样式 */
   }

4. :nth-last-child(n): Select the nth child element from the bottom under the parent element. Similar to :nth-child, you can use specific numbers or formulas to specify the value of n. For example, select the second-to-last child element under the parent element:

   :nth-last-child(2) {
     /* 样式 */
   }

5. :only-child: Select the only child element under the parent element. For example, when selecting only one child element under all parent elements:

   :only-child {
     /* 样式 */
   }

6. :not(selector): Select elements that do not satisfy the specified selector. Various selectors can be used as arguments to exclude specific elements. For example, select all elements that are not `` tags:

   :not(a) {
     /* 样式 */
   }

7. :empty: Select elements that have no child elements or text content. For example, select all elements that have no child elements:

   :empty {
     /* 样式 */
   }

8. :checked: Select selected form elements (such as check boxes or radio buttons). For example, select all selected checkboxes:

   :checked {
     /* 样式 */
   }

9. :enabled and :disabled: select available and unavailable form elements. For example, select all available input boxes:

   :enabled {
     /* 样式 */
   }

10. :focus: Select the currently focused element. For example, select the currently focused input box: