How to use CSS3 attribute selectors to replace the role of JS

We know that in CSS3, in addition to the introduction of special effects such as animations and filters, as well as new layout technologies, there are also enhancements in selectors. Work that could only be done in JS in the past can now be completed through CSS technology. , Next, I will introduce to you the powerful CSS3

Attribute selector matches based on the attributes of the element. This can be a single attribute, such as [type], or a combination of attributes and values, such as [type=checkbox] or [for="email"].

We can also use attribute selectors to match the presence or absence of attributes and sub-strings. For example, we can match attribute values ​​in a space-separated list, or we can match attribute values ​​that begin with the string tel:. We can even match hyphenated attribute values ​​such as en-US. Hyphen matching and space-separated attribute value list matching have been defined as early as CSS2.

The enhancement of CSS3 is the addition of partial matching rules. This article will focus on the use of the newly introduced attribute selectors (Attribute selectors).

1. Partial matching

It is a very common method to use the full attribute value to match, but in CSS3 we can use partial matching. The syntax format is:

[att ~=val]

Here att represents an attribute, and val represents a value in a space-separated list of attribute values. The tilde ~ represents the semantics of a partial match.

For example:

ikinsoft

2. Substring matching

We can also match attribute values ​​through substrings, which is somewhat similar toRegular expression:

^=: Match from the head

$=: Matches from the tail

*=: Contains a certain substring

For example, the following html code:

Call ikinsoft online support

## I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other php Chinese websites related articles!

Related reading:

CSS3 detailed introduction to the translate attribute

CSS3 steps to achieve the rotating halo effect

CSS3 making circular style breadcrumbs code implementation steps

The above is the detailed content of How to use CSS3 attribute selectors to replace the role of JS. For more information, please follow other related articles on the PHP Chinese website!