CSS grouping and nested selectors
Selector Grouping
Suppose you want both the h2 element and the paragraph to be gray. To achieve this, the easiest thing to do is to use the following declaration:
h2, p {color:gray;}
Combine the h2 and p selectors Place it to the left of the rule and separate it with commas to define a rule. The style to the right (color:gray;) will be applied to the elements referenced by these two 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 selector.
You can group any number of selectors together without any restrictions.
For example, if you want to make many elements gray, you can use a rule similar to the following:
body, h2, p, table, th, td, pre, strong, em {color:gray;}
Tip: By grouping, authors can "compress" certain types of styles together, resulting 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;}
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
h1, h2, h3, h4, h5, p{
color:purple;
font-size:15px;
}
h2.special, .special, #one{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p>
<p id="one">集体声明p3</p>
</body>
</html>Nested selector
Summary of usage rules:
1. id nested class #myid.myclass: <p id="sp" class="myclass"></p>.
2. One element tag uses multiple classes. .important.warning <p class="important warning">Be careful not to include spaces. There are spaces to indicate that they are applicable to two classes respectively.
3. The class element within the id tag. #myid .myclass <div id="myid"><p class="myclass"></p></div>
4. The class under the element tag. p .myclass <p><span class="myclass"></span></p>
4. The id under the element tag. p #myid<p><span id="myid"></span></p>
5. Element tag under class. .myclass span <p class="myclass"><span>dd</span></p>
6. The id tag within the id tag #myid #myid2 <div id="myid" ><div id="myid2"></div></div>. The usage of id is similar to that of element tags.
7. .myclass1 .myclass2 means that two classes use the same style instead of nesting. Classes can also be nested within classes. But if there is no space between the two .myclasses, it means that you have both classes
8. Element tag nested element tag p span <p><span></span></p>
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
</body>
</html>
