How to use the CSS3 attribute selector to replace the function of JS

We know that in addition to the introduction of animation and filters and other special effects in the CSS3 also has a new layout technology in the aspect of the selector is also enhanced, before the work of JS can now be done through the technology of CSS can be achieved, and then to introduce you to the powerful CSS3

The property selector matches the attributes of the element (attributes). This can be a separate property, such as [type], or it can be a combination of attributes and values, such as [Type=checkbox] or [for= "email"].

We can also use the property selector to match the presence or absence of a property and substrings. For example, we can match a property value in a space-delimited list, or we can match a property value that starts with the string Tel:. We can even match attribute values with hyphens such as en-us. Where the hyphen match and the space-delimited attribute value list match are already defined in CSS2.

CSS3 is enhanced by the addition of partial (partial) matching rules. This article focuses on the new method of using the property selector (Attribute selectors).

1. Partial match

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

[Att~=val]

Here the att represents the attribute, and Val represents a value in the list of attribute values separated by a space. Wavy lines ~ represent the semantics of partial matching.

Like what:

<a href= "http://www.ikinsoft.com/" class= "HTML5 Friends" >ikinsoft</a>

2. Sub-string matching

We can also match the property value by a substring, which is somewhat similar to a regular expression:

^=: Match from head

$=: Match from tail

*=: Contains a substring

For example, the following HTML code:

<a href= "tel:+13800138000" >call ikinsoft online support</a>

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

CSS3 a detailed description of the Translate property

CSS3 realization of rotating halo effect

CSS3 making circular style breadcrumbs code implementation steps