Get the App
SLTechnology News&Howtos  ›  Development  › 

How CSS3 uses the property Selector to complete the work of JavaScript

Shulou Source: shulou.com Published: 2022-06-01 11:11:23 10月03日 Update

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!

Tags: Attributes selections characters strings articles sections work spaces representatives techniques methods hyphens hyphens codes values usage elements interests animation available through the Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Shulou Information Huawei Xiaomi Shulou Technology MySQL