Use of CSS attribute selector for Fuzzy Matching

Document directory

• Difference between the partial score attribute selector and the point class name Recording Method
•  
• Substring matching attribute Selector

Conversion from: http://www.w3school.com.cn/css/css_selector_attribute.asp,?selector

Select based on partial attribute values

If you want to select a word from the word list in the attribute value, use the Tilde (~).

If you want to select an element that contains important in the class attribute, you can use the following selector to do this:

p[class~="important"] {color: red;}

Try it yourself

If the Tilde is ignored, a full value match is required.

Difference between the partial score attribute selector and the point class name Recording Method

This selector is equivalent to the Point class name method discussed in the class selector.

That is to say, P. Important and P ["important"] are equivalent when applied to HTML documents.

So why do we need "~ = "What about the attribute selector? Because it can be used for any attribute, not just a class.

For example, you can have a document containing a large number of images, only a part of which is an image. You can use a partial property Selector Based on the title document to select only the images:

img[title~="Figure"] {border: 1px solid gray;}

This rule Selects all images whose title text contains "figure. Images that do not have the title attribute or contain "figure" do not match.

Try it yourself

Note: The value here must be a complete word, such as the figure in the current position. If you use IMG [Title ~ = "Figu"] {border: 1px solid gray;} Then CSS becomes invalid, and some matching fails. Substring matching attribute Selector

The following describes a more advanced selector module, which was released after css2 was completed, and contains more partial score attribute selectors. According to the standard, it should be called the "substring matching attribute selector ".

Many modern browsers support these selectors, including ie7.

The following table provides a brief summary of these selectors:

Type	Description
[ABC ^ = "def"]	Select all elements whose ABC attribute value starts with "def"
[ABC $ = "def"]	Select all elements whose ABC attribute values end with "def"
[ABC * = "def"]	Select all elements in the ABC property value that contain the sub-string "def"

It can be imagined that these options have many purposes.

For example, if you want to apply a style to all links pointing to w3school, you do not have to specify a class for all these links and then write a style based on this class. Instead, you only need to write the following rules:

a[href*="w3school.com.cn"] {color: red;}

SIGHS: Powerful Fuzzy Matching of attributes.