What attribute selectors are there in css selectors?

The attribute selectors of css selectors include equal selector, contains selector, start selector, end selector, substring selector, multi-value selector and negative selector. Detailed introduction: 1. The equal selector, using square brackets and equal signs, means selecting elements with specified attribute values; 2. The containing selector, using square brackets and asterisks, means selecting elements containing the attribute value of the specified string; 3. Start the selector, use square brackets and asterisks, to select elements with attribute values ​​starting with the specified string; 4. End the selector, use square brackets and dollar signs, etc.

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

CSS selectors provide a variety of attribute selectors for selecting elements based on their attribute values. These attribute selectors can select based on equality, inclusion, start, end, etc. of attribute values. The following are common attribute selectors in CSS:

1. Equals Selector: Use square brackets ([]) and equal signs (=) to select elements with specified attribute values. For example, `[class="red"]` means to select all elements whose class attribute value is "red".

2. Contains Selector: Use square brackets ([]) and asterisks (*) to select elements that contain the attribute value of the specified string. For example, `[href*="example"]` means to select all elements whose href attribute value contains "example".

3. Starts With Selector: Use square brackets ([]) and carets (^) to select elements with attribute values ​​starting with the specified string. For example, `[class^="red"]` means to select all elements whose class attribute value starts with "red".

4. Ends With Selector: Use square brackets ([]) and the dollar sign ($) to select elements with attribute values ​​that end with the specified string. For example, `[class$="red"]` means to select all elements whose class attribute value ends with "red".

5. Substring Selector: Use square brackets ([]) and vertical bar symbols (|) to select elements with specified attribute values, or the attribute value starts with the specified string and ends Elements followed by a hyphen. For example, `[lang|="en"]` means to select all elements whose lang attribute value is "en", or elements whose attribute value starts with "en-".

6. Multiple Values ​​Selector: Use square brackets ([]) and equal sign (=) to specify multiple attribute values ​​at the same time, which means selecting any one of the specified attribute values. element. Separate multiple attribute values ​​with spaces. For example, `[class="red blue"]` means to select all elements whose class attribute value is "red" or "blue".

7. Negation Selector: Use square brackets ([]) and colon (:not()) to select elements that do not have the specified attribute value. For example, `[class]:not([class="red"])` means to select all elements that have a class attribute but are not "red".

The above are common attribute selectors in CSS. By using these selectors, we can select and style elements in web pages based on their attribute values ​​to achieve rich and diverse effects. At the same time, attribute selectors can also be used in combination with other selectors and pseudo-class selectors to further expand the selection scope and conditions.

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