Shulou(Shulou.com)06/01 Report--

This article mainly introduces CSS3 how to use attribute selector to complete the work of JavaScript, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand it.

In addition to introducing animation, filters (for special effects), and new layout techniques, CSS3 also has enhancements in terms of selector. In the past, work that could only be done with JavaScript can also be done through these technologies of CSS.

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

We can also use the property selector to match the existence of the attribute and the substring. For example, we can match attribute values in a space-separated list, or we can match attribute values that start with the string tel:. We can even match hyphen attribute values such as en-US. Hyphen matching and space-separated attribute value list matching have been defined in CSS2.

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

1. Partial matching

Using all attribute values to match is a common method, 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 list of attribute values separated by spaces. The wavy line ~ represents the semantics of partial matching.

For example:

Ikinsoft

two。 Substring matching

We can also match attribute values through substrings, somewhat similar to regular expressions:

^ =: match from head

$=: match from the tail

* =: contains a substring

For example, the following html code:

Call ikinsoft online support

Thank you for reading this article carefully. I hope the article "CSS3 how to use the property Selector to complete the work of JavaScript" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.