CSS grouping and nested selectors

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

     
  
这个段落是蓝色文本，居中对齐。
 
 
这个段落不是蓝色文本。
 
 
所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。