A Brief Analysis of CSS Selector Grouping
|
Selector Grouping Suppose you want both the h2 element and the paragraph to be gray. The easiest way to do this is to use the following statement: A rule is defined by placing the h2 and p selectors on the left side of the rule, separated by commas. The style to the right (color:gray;) will be applied to the elements referenced by both selectors. The comma tells the browser that the rule contains two different selectors. Without this comma, the meaning of the rule would be completely different. See Descendant Selectors. You can group as many selectors as you want together without any restriction. For example, if you want to gray out a lot of elements, you could use a rule like this: Tip: Grouping allows authors to "compress" certain types of styles together, which can result in a more concise style sheet. The following two sets of rules achieve the same result, but it's clear which one is easier to write: /* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}Grouping offers some interesting options. For example, all of the following rule groupings are equivalent; each group simply demonstrates a different way to group selectors and declarations: /* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}Wildcard Selector CSS2 introduced a new simple selector - the universal selector, which appears as an asterisk (*). This selector matches any element, just like a wildcard. For example, the following rule would make every element in a document red: * {color:red;}
<html>
<head>
<style type="text/css">
* {color:red;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p>This is a <b>normal</b> paragraph of text. </p>
</body>
</html>This declaration is equivalent to a grouping selector that lists all elements in the document. Using the wildcard selector, you can specify the color attribute value of red for all elements in the document with just one keystroke (just an asterisk). Declaration Grouping We can group both selectors and declarations. Suppose you want all h1 elements to have a red background and blue text using the Verdana font that is 28 pixels high, you could write the following style: h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}However, the above approach is not very efficient. This can be cumbersome especially when we have to create such a list for an element that has multiple styles. Instead, we can group declarations together: This has exactly the same effect as the previous 3-line style sheet. Note that it is important to use a semicolon at the end of each statement to group them. Browsers ignore whitespace in style sheets. As long as you include the semicolon, you can create styles in the following formats without any problems: h1 {
font: 28px Verdana;
color: blue;
background: red;
}How about it? Is the above writing more readable? However, if the second semicolon is omitted, the user agent interprets the style sheet as follows: h1 {
font: 28px Verdana;
color: blue background: red;
}Because background is not a legal value for color, and because only one keyword can be specified for color, the user agent ignores the color declaration entirely (including the background: black part). This way the h1 heading will only appear blue without the red background, but it's more likely that you won't get a blue h1 at all. Instead, these headers will just appear in a default color (usually black) with no background color at all. font: 28px Verdana The declaration still works fine because it does correctly end with a semicolon. Like selector grouping, declaration grouping is a convenient way to shorten your stylesheets, making them clearer and easier to maintain. Tip: It is a good habit to also put a semicolon after the last statement in a rule. When you add another declaration to the rule, you don't have to worry about forgetting to insert another semicolon. Combining selectors and declarations with grouping We can combine selector grouping and declaration grouping in one rule to define relatively complex styles with very few statements. The following rule specifies a complex style for all headings: h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}
<html>
<head>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Combining selectors and declarations with grouping We can combine selector grouping and declaration grouping in one rule to define relatively complex styles with very few statements. The following rule specifies a complex style for all headings: h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}The above rule defines the style of all headings as gray text with a white background, 10 pixels of padding, and a 1-pixel solid border, and the text font is Verdana. Combining selectors and declarations with grouping We can combine selector grouping and declaration grouping in one rule to define relatively complex styles with very few statements. The following rule specifies a complex style for all headings: h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}Summarize The above is the CSS selector grouping that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: JavaScript ES6 Module Detailed Explanation
>>: In-depth discussion on auto-increment primary keys in MySQL
Recommend
js uses the reduce method to make your code more elegant
Preface In actual projects, the most common proce...
Detailed explanation of MySQL Group by optimization
Table of contents Standard execution process opti...
In-depth analysis of MySQL 8.0 redo log
Table of contents Preface Generation of redo log ...
Ubuntu installs scrcpy to complete mobile phone screen projection and control (another way to use QQ WeChat in Ubuntu)
Scrcpy Installation snap install scrcpy adb servi...
Collapsed table row element bug
Let's take an example: The code is very simple...
Detailed explanation of how tomcat calls Servlet initialization from source code analysis
Table of contents introduction 1. Code to start t...
Tutorial on installing the unpacked version of mysql5.7 on CentOS 7
1. Unzip the mysql compressed package to the /usr...
Detailed explanation of Nginx configuration parameters in Chinese (load balancing and reverse proxy)
PS: I've recently been reading the Nginx chap...
MySQL 8.0.14 installation and configuration method graphic tutorial (general)
MySQL service 8.0.14 installation (general), for ...
Vue3.0 implements the magnifying glass effect case study
The effect to be achieved is: fixed zoom in twice...
Nginx http health check configuration process analysis
Passive Check With passive health checks, NGINX a...
The whole process of node.js using express to automatically build the project
1. Install the express library and generator Open...
Detailed explanation of the murder caused by a / slash in Nginx proxy_pass
background An nginx server module needs to proxy ...
Javascript front-end optimization code
Table of contents Optimization of if judgment 1. ...
MySQL permission control details analysis
Table of contents 1. Global level 2. Database lev...