CSS Grouping and Nested Selectors
The so-called grouping selector means that when the elements corresponding to multiple selectors require the same style, multiple selectors can be separated by commas and placed in front of a style statement. Achieve the same effect of multiple selectors and multiple style declarations.
The so-called nested selector is to set the style of the element corresponding to the selector inside the selector.css
In the style There are many elements with the same style in the table.
h1{color:green;}
h2{color:green;}
p{color:green;}To minimize code, you can use grouped selectors.
Separate each selector with a comma.
In the following example, we use grouped selectors for the above code:
h1,h2,p{color:green;}Nested selectors
It may be applied to styles of selectors inside selectors.
In the following example, three styles are set:
Specify a style for all p elements
Specify a style for all elements with class="marked"
Specify a style for all p elements within class="marked" elements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{
color:blue; text-align:center;}
.marked{ background-color:red;}
.marked p{ color:white;}
</style>
</head>
<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
</body>
</html>