How to use CSS3 attribute selectors to replace the role of JS-CSS Tutorial-php.cn

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 selectormatches 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!