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
Linux automatic login example explanation
There are many scripts on the Internet that use e...
MySQL slow query: Enable slow query
1. What is the use of slow query? It can record a...
js regular expression lookahead and lookbehind and non-capturing grouping
Table of contents Combining lookahead and lookbeh...
MySQL8 Installer version graphic tutorial
Installation The required documents are provided ...
Example of how to create a database name with special characters in MySQL
Preface This article explains how to create a dat...
HTML version declaration DOCTYPE tag
When we open the source code of a regular website...
How to configure two-way certificate verification on nginx proxy server
Generate a certificate chain Use the script to ge...
js object-oriented method to achieve drag effect
This article shares the specific code for impleme...
JS implements multiple tab switching carousel
Carousel animation can improve the appearance and...
Comprehensive understanding of line-height and vertical-align
Previous words Line-height, font-size, and vertica...
MySQL table deletion operation implementation (differences between delete, truncate, and drop)
This article mainly discusses the differences bet...
HTML uses form tags to implement the registration page example code
Case Description: - Use tables to achieve page ef...
Vue calls the PC camera to realize the photo function
This article example shares the specific code of ...
Issues with locking in MySQL
Lock classification: From the granularity of data...
Implementation code of html floating prompt box function
General form prompts always occupy the form space...