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
Recommend
mysql method to recursively search for all child nodes of a menu node
background There is a requirement in the project ...
Tutorial on installing Tomcat server under Windows
1 Download and prepare First, we need to download...
SQL Server Comment Shortcut Key Operation
Batch comments in SQL Server Batch Annotation Ctr...
MySQL trigger definition and usage simple example
This article describes the definition and usage o...
Vue implements login verification code
This article example shares the specific code of ...
A brief discussion on two methods of achieving semi-transparent background color in CSS
When laying out the page, in order to give users ...
Two solutions for Vue package upload server refresh 404 problem
1: nginx server solution, modify the .conf config...
Decompression, installation, backup and restore of MySQL under Windows environment
The system environment is server2012 1. Download ...
Teach you step by step to develop a brick-breaking game with vue3
Preface I wrote a few examples using vue3, and I ...
JS operation object array to achieve add, delete, modify and query example code
1. Introduction Recently, I helped a friend to ma...
MySQL 8.0.20 Window10 free installation version configuration and Navicat management tutorial graphic detailed explanation
1. Download and decompress MySQL 8.0.20 Download ...
MySQL 5.7.23 installation and configuration graphic tutorial
This article records the detailed installation pr...
Solution to HTML2 canvas SVG not being recognized
There is a new feature that requires capturing a ...
linux No space left on device 500 error caused by inode fullness
What is an inode? To understand inode, we must st...
Detailed explanation of the solution for CSS-opacity child elements to inherit the transparency of parent elements
In the process of writing the project page, I enc...