Solve the matching problem in CSS

Problem Description

As we all know, when writing CSS, the corresponding CSS code will be written according to the definition of the class or the definition of the ID in HTML. Define different styles for different classes. Of course, in order to write less code, people will reference matching in CSS. There are two types of matching: fuzzy matching and global matching. There are several ways to match. Of course, you can also write different class names in HTML, or write the same class name, to achieve matching of all styles. But sometimes the class name cannot be written the same, which will result in redundant code and increase the complexity of the code. In order to reduce code redundancy, class matching appears.

Solution

The first method is to use div for matching, but this matching will use the same style for all divs.

<div>
<div id='div1'/>
<div id='div2'/>    
</div>
// If you want to set the style of all the divs inside, use the > identifier.parent>div{
//style//
}

The second method is to match the class defined by class. This kind of matching is relatively accurate, and there are also two matching methods. The first matching method is to use the arrow symbol to match. For example: [class^="icon-"]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[class^="icon-"]{
width: 100px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>5555</div>
</body>
</html>

Figure 2.1 Effect

However, this matching method requires the class name to be preceded by icon-. If there are other names before the class name, the corresponding effect will not be achieved. Therefore, another matching method can be used. That is, global matching in class names. For example:

[class*=" icon-"] , note that there is a space before icon. And you need to replace the arrow above with an asterisk, so that global matching of the corresponding class name can be achieved.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

[class*="icon-"]{

width: 100px;

height: 50px;

background-color: red;

}

</style>

</head>

<body>

<div>1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

<div class="text-success icon-t">555</div>

</body>

</html>

Figure 2.2 Effect

This way, as long as the class name contains Icon, the style can be matched. However, this kind of matching cannot achieve the corresponding effect for the class name that starts with icon, so you can use the two together. In this way, the matching effect can be fully achieved.

Figure 2.3 Effect

There are two ways to achieve the above effect. The first is to use the two together, and the second is to clear the space in front of the icon.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

[class^="icon-"],[class*="icon-"]{

width: 100px;

height: 50px;

background-color: red;

}

</style>

</head>

<body>

<div>1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

<div class="text-success icon-test">555</div>

</body>

</html>

This will reduce code redundancy.

In the process of writing code, you must learn to reduce code redundancy so that the program can run better.

This is the end of this article about matching issues in CSS. For more relevant CSS matching content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Linux swap partition (detailed explanation)

>>: Details of MutationObServer monitoring DOM elements in JavaScript