[css] Detailed explanation of css attribute selector

A CSS attribute selector is a CSS selector that selects elements based on their attribute values. It allows you to select elements that contain or match a specific value based on the element's attribute value. Here are some examples of common CSS attribute selectors:

Attribute existence selector ([attribute]): selects elements with the specified attribute.

Example: [disabled]Select all elements with disabled attribute.

Equal selector ([attribute=value]): Selects elements whose attribute value is equal to the specified value.

Example: [type="text"]Select all elements whose type attribute value is "text".

Contains selector ([attribute*=value]): Selects elements whose attribute value contains the specified value.

Example: [class*="button"]Select all elements whose class attribute value contains "button".

Beginning match selector ([attribute^=value]): Selects elements whose attribute value starts with the specified value.

Example: [href^="https://"]Select all elements whose href attribute value starts with "https://".

End matching selector ([attribute$=value]): Selects elements whose attribute value ends with the specified value.

Example: [src$=".png"]Select all elements whose src attribute value ends with ".png".

Contains word selector ([attribute~=value]): Selects elements whose attribute value contains the specified word.

Example: [class~= "red"]Select all elements whose class attribute value contains the word "red".

These are some common CSS attribute selectors.

Guess you like

Origin blog.csdn.net/hzxOnlineOk/article/details/132967127